adserver-dashboard 1.0.0

package/client/src/components/line-items/geofencing/POIDropdown.tsx

@@ -0,0 +1,379 @@
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { Button } from '@moving-walls/design-system';
+import { Badge } from '@moving-walls/design-system';
+import { cn } from '@moving-walls/design-system';
+import { ChevronDown, Search, X, Loader2 } from 'lucide-react';
+import { POI_TYPES, type POIType } from '@/lib/poi-types';
+import { fetchPOICategories, type POICategoryResult } from '@/lib/google-poi-api';
+
+interface SelectedLocation {
+  id: string;
+  geometry?: {
+    type: string;
+    coordinates: any;
+  };
+  properties?: {
+    name?: string;
+    center?: [number, number];
+  };
+  poi?: string[];
+}
+
+interface POIDropdownProps {
+  selectedPOIs: string[];
+  onPOIsChange: (pois: string[]) => void;
+  onRenderPOIs: (pois: string[], metadata: Record<string, string>) => void;
+  disabled?: boolean;
+  maxSelections?: number;
+  isLoading?: boolean;
+  selectedLocation?: SelectedLocation | null;
+  useDynamicCategories?: boolean;
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  showChipsInTrigger?: boolean;
+}
+
+export function POIDropdown({
+  selectedPOIs,
+  onPOIsChange,
+  onRenderPOIs,
+  disabled = false,
+  maxSelections = 5,
+  isLoading = false,
+  selectedLocation = null,
+  useDynamicCategories = false,
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  showChipsInTrigger = false,
+}: POIDropdownProps) {
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  
+  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+  const setIsOpen = (open: boolean) => {
+    if (onOpenChange) {
+      onOpenChange(open);
+    } else {
+      setInternalIsOpen(open);
+    }
+  };
+  const [searchQuery, setSearchQuery] = useState('');
+  const [dynamicCategories, setDynamicCategories] = useState<POICategoryResult[]>([]);
+  const [isLoadingCategories, setIsLoadingCategories] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (selectedLocation?.poi && selectedLocation.poi.length > 0) {
+      onPOIsChange(selectedLocation.poi);
+    }
+  }, [selectedLocation?.id]);
+
+  useEffect(() => {
+    const fetchCategories = async () => {
+      if (!useDynamicCategories || !selectedLocation) return;
+
+      const center = getLocationCenter(selectedLocation);
+      if (!center) return;
+
+      setIsLoadingCategories(true);
+      try {
+        const categories = await fetchPOICategories({
+          location: { lat: center[1], lng: center[0] },
+          radius: 5000,
+        });
+        setDynamicCategories(categories);
+      } catch (error) {
+        console.error('Error fetching POI categories:', error);
+      } finally {
+        setIsLoadingCategories(false);
+      }
+    };
+
+    fetchCategories();
+  }, [selectedLocation?.id, useDynamicCategories]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+
+  const availablePOIs = useMemo(() => {
+    if (useDynamicCategories && dynamicCategories.length > 0) {
+      return dynamicCategories.map((cat) => ({
+        id: cat.value,
+        label: cat.label,
+        category: 'Dynamic',
+      }));
+    }
+    return POI_TYPES;
+  }, [useDynamicCategories, dynamicCategories]);
+
+  const filteredPOIs = availablePOIs.filter((poi) =>
+    poi.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    (poi.category && poi.category.toLowerCase().includes(searchQuery.toLowerCase()))
+  );
+
+  const handleTogglePOI = (poiId: string) => {
+    if (selectedPOIs.includes(poiId)) {
+      onPOIsChange(selectedPOIs.filter((id) => id !== poiId));
+    } else if (selectedPOIs.length < maxSelections) {
+      onPOIsChange([...selectedPOIs, poiId]);
+    }
+  };
+
+  const handleRemovePOI = (poiId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    onPOIsChange(selectedPOIs.filter((id) => id !== poiId));
+  };
+
+  const handleRenderClick = () => {
+    const metadata: Record<string, string> = {
+      poiCount: String(selectedPOIs.length),
+      locationId: selectedLocation?.id || '',
+      timestamp: new Date().toISOString(),
+    };
+    onRenderPOIs(selectedPOIs, metadata);
+    setIsOpen(false);
+  };
+
+  const isEffectivelyDisabled = disabled || (!selectedLocation && useDynamicCategories);
+
+  const handleRemovePOIFromTrigger = (poiId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    onPOIsChange(selectedPOIs.filter((id) => id !== poiId));
+  };
+
+  return (
+    <div className="relative w-full">
+      <Button
+        ref={triggerRef}
+        variant="outline"
+        size="md"
+        onClick={() => !isEffectivelyDisabled && setIsOpen(!isOpen)}
+        disabled={isEffectivelyDisabled}
+        className={cn(
+          'w-full',
+          isOpen && 'ring-2 ring-mw-primary-500'
+        )}
+      >
+        {showChipsInTrigger && selectedPOIs.length > 0 ? (
+          <div className="flex-1 flex flex-wrap gap-1 overflow-hidden">
+            {selectedPOIs.slice(0, 3).map((poiId) => {
+              const poi = availablePOIs.find((p) => p.id === poiId);
+              return (
+                <Badge
+                  key={poiId}
+                  variant="default"
+                  className="text-xs flex items-center gap-1 pr-1 py-0 h-6"
+                >
+                  <span className="truncate max-w-[80px]">{poi?.label || poiId}</span>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    isIconOnly
+                    onClick={(e) => handleRemovePOIFromTrigger(poiId, e)}
+                    className="ml-0.5"
+                  >
+                    <X className="h-2.5 w-2.5" />
+                  </Button>
+                </Badge>
+              );
+            })}
+            {selectedPOIs.length > 3 && (
+              <Badge variant="outline" className="text-xs py-0 h-6">
+                +{selectedPOIs.length - 3}
+              </Badge>
+            )}
+          </div>
+        ) : (
+          <span className="flex-1 text-left truncate text-mw-neutral-400">
+            {selectedPOIs.length > 0 ? `${selectedPOIs.length} POI${selectedPOIs.length > 1 ? 's' : ''} selected` : 'Select POI Types'}
+          </span>
+        )}
+        <ChevronDown className={cn('h-4 w-4 text-mw-neutral-400 transition-transform flex-shrink-0', isOpen && 'rotate-180')} />
+      </Button>
+
+      {isOpen && (
+        <div
+          ref={dropdownRef}
+          className={cn(
+            'absolute top-full left-0 mt-1 z-50',
+            'w-[280px] bg-white dark:bg-mw-neutral-800',
+            'border border-mw-neutral-200 dark:border-mw-neutral-700',
+            'rounded-md shadow-lg',
+            'animate-in fade-in-0 zoom-in-95 duration-150'
+          )}
+        >
+          <div className="p-2 border-b border-mw-neutral-200 dark:border-mw-neutral-700">
+            <div className="relative">
+              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+              <input
+                type="text"
+                placeholder="Search..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className={cn(
+                  'w-full pl-8 pr-3 py-1.5 text-sm',
+                  'bg-mw-neutral-50 dark:bg-mw-neutral-900',
+                  'border border-mw-neutral-200 dark:border-mw-neutral-700',
+                  'rounded-md outline-none',
+                  'focus:ring-2 focus:ring-mw-primary-500 focus:border-transparent',
+                  'placeholder:text-mw-neutral-400'
+                )}
+              />
+            </div>
+          </div>
+
+          <div className="px-3 py-2 border-b border-mw-neutral-200 dark:border-mw-neutral-700">
+            <div className="flex items-center justify-between">
+              <span className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400">
+                {selectedLocation
+                  ? `Adding POIs to: ${selectedLocation.properties?.name || selectedLocation.id.substring(0, 8)}`
+                  : `Select up to ${maxSelections} POIs`}
+              </span>
+              <Badge variant="outline" className="text-xs px-1.5 py-0.5">
+                {selectedPOIs.length}/{maxSelections}
+              </Badge>
+            </div>
+          </div>
+
+          <div className="max-h-[200px] overflow-y-auto">
+            {isLoadingCategories ? (
+              <div className="px-3 py-4 text-center">
+                <Loader2 className="h-5 w-5 animate-spin mx-auto text-mw-primary-500 mb-2" />
+                <span className="text-sm text-mw-neutral-500">Loading categories...</span>
+              </div>
+            ) : filteredPOIs.length === 0 ? (
+              <div className="px-3 py-4 text-center text-sm text-mw-neutral-500">
+                No POI types found
+              </div>
+            ) : (
+              filteredPOIs.map((poi) => {
+                const isSelected = selectedPOIs.includes(poi.id);
+                const isDisabledItem = !isSelected && selectedPOIs.length >= maxSelections;
+
+                return (
+                  <Button
+                    key={poi.id}
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => !isDisabledItem && handleTogglePOI(poi.id)}
+                    disabled={isDisabledItem}
+                    className={cn(
+                      'w-full',
+                      isSelected && 'bg-mw-primary-50 dark:bg-mw-primary-900/20'
+                    )}
+                  >
+                    <div
+                      className={cn(
+                        'w-4 h-4 rounded border flex items-center justify-center flex-shrink-0',
+                        isSelected
+                          ? 'bg-mw-primary-500 border-mw-primary-500'
+                          : 'border-mw-neutral-300 dark:border-mw-neutral-600'
+                      )}
+                    >
+                      {isSelected && (
+                        <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                        </svg>
+                      )}
+                    </div>
+                    <span className="text-mw-neutral-700 dark:text-mw-neutral-300">{poi.label}</span>
+                  </Button>
+                );
+              })
+            )}
+          </div>
+
+          {selectedPOIs.length > 0 && (
+            <div className="px-3 py-2 border-t border-mw-neutral-200 dark:border-mw-neutral-700">
+              <div className="flex flex-wrap gap-1 mb-2">
+                {selectedPOIs.map((poiId) => {
+                  const poi = availablePOIs.find((p) => p.id === poiId);
+                  return (
+                    <Badge
+                      key={poiId}
+                      variant="default"
+                      className="text-xs flex items-center gap-1 pr-1"
+                    >
+                      {poi?.label || poiId}
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        isIconOnly
+                        onClick={(e) => handleRemovePOI(poiId, e)}
+                        className="ml-0.5"
+                      >
+                        <X className="h-2.5 w-2.5" />
+                      </Button>
+                    </Badge>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          <div className="p-2 border-t border-mw-neutral-200 dark:border-mw-neutral-700">
+            <Button
+              type="button"
+              onClick={handleRenderClick}
+              disabled={selectedPOIs.length === 0 || isLoading}
+              className="w-full bg-mw-primary-500 hover:bg-mw-primary-600 text-white"
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Loading POIs...
+                </>
+              ) : (
+                'Render POIs'
+              )}
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function getLocationCenter(location: SelectedLocation): [number, number] | null {
+  if (location.properties?.center) {
+    return location.properties.center;
+  }
+  if (location.geometry?.type === 'Point' && location.geometry.coordinates) {
+    return location.geometry.coordinates as [number, number];
+  }
+  if (location.geometry?.type === 'Polygon' && location.geometry.coordinates?.[0]) {
+    const coords = location.geometry.coordinates[0];
+    if (Array.isArray(coords) && coords.length > 0) {
+      const sumLng = coords.reduce((acc: number, c: any) => acc + (c[0] || 0), 0);
+      const sumLat = coords.reduce((acc: number, c: any) => acc + (c[1] || 0), 0);
+      return [sumLng / coords.length, sumLat / coords.length];
+    }
+  }
+  return null;
+}