import { type TravelTimeEntry, travelFieldKey } from '../../../hooks/useTravelTime';
import { TravelTimeCard } from '../TravelTimeCard';

interface TravelTimeFilterCardsProps {
  entries: TravelTimeEntry[];
  activeFeature: string | null;
  dragValue: [number, number] | null;
  pinnedFeature: string | null;
  filterImpacts?: Record<string, number>;
  destinationDropdownPortal: boolean;
  onTogglePin: (name: string) => void;
  onTravelTimeRemoveEntry: (index: number) => void;
  onTravelTimeSetDestination: (
    index: number,
    slug: string,
    label: string,
    lat: number,
    lon: number
  ) => void;
  onTravelTimeRangeChange: (index: number, range: [number, number]) => void;
  onTravelTimeDragEnd: (index: number) => void;
  onTravelTimeToggleBest: (index: number) => void;
  onTravelTimeToggleNoChange: (index: number) => void;
  onTravelTimeToggleOneChange: (index: number) => void;
  onTravelTimeToggleNoBuses: (index: number) => void;
  onDragStart: (name: string, initialValue?: [number, number]) => void;
  onDragChange: (value: [number, number]) => void;
}

export function TravelTimeFilterCards({
  entries,
  activeFeature,
  dragValue,
  pinnedFeature,
  filterImpacts,
  destinationDropdownPortal,
  onTogglePin,
  onTravelTimeRemoveEntry,
  onTravelTimeSetDestination,
  onTravelTimeRangeChange,
  onTravelTimeDragEnd,
  onTravelTimeToggleBest,
  onTravelTimeToggleNoChange,
  onTravelTimeToggleOneChange,
  onTravelTimeToggleNoBuses,
  onDragStart,
  onDragChange,
}: TravelTimeFilterCardsProps) {
  return (
    <>
      {entries.map((entry, index) => {
        const fieldKey = travelFieldKey(entry);
        return (
          <div key={`tt_${index}`} data-filter-name={`tt_${index}`}>
            <TravelTimeCard
              mode={entry.mode}
              slug={entry.slug}
              label={entry.label}
              timeRange={entry.timeRange}
              useBest={entry.useBest}
              noChange={entry.noChange ?? false}
              oneChange={entry.oneChange ?? false}
              noBuses={entry.noBuses ?? false}
              isPinned={pinnedFeature === fieldKey}
              isActive={activeFeature === fieldKey}
              dragValue={activeFeature === fieldKey ? dragValue : null}
              onTogglePin={() => onTogglePin(fieldKey)}
              onSetDestination={(slug, label, lat, lon) =>
                onTravelTimeSetDestination(index, slug, label, lat, lon)
              }
              onTimeRangeChange={(range) => onTravelTimeRangeChange(index, range)}
              onDragStart={(range) => onDragStart(fieldKey, range)}
              onDragChange={onDragChange}
              onDragEnd={() => onTravelTimeDragEnd(index)}
              onToggleBest={() => onTravelTimeToggleBest(index)}
              onToggleNoChange={() => onTravelTimeToggleNoChange(index)}
              onToggleOneChange={() => onTravelTimeToggleOneChange(index)}
              onToggleNoBuses={() => onTravelTimeToggleNoBuses(index)}
              onRemove={() => onTravelTimeRemoveEntry(index)}
              filterImpact={filterImpacts?.[fieldKey]}
              destinationDropdownPortal={destinationDropdownPortal}
            />
          </div>
        );
      })}
    </>
  );
}
