import { UseFormReturn } from "react-hook-form";
import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from "@/components/ui/form";
import { StepFormData } from "../schemas/stepSchema";
import { STEP_TYPES } from "@/types/stepTypes";
import type { StepType } from "@/types/stepTypes";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "@/components/ui/select";

interface StepTypeFieldProps {
  form: UseFormReturn<StepFormData>;
}

export function StepTypeField({ form }: StepTypeFieldProps) {
  return (
    <FormField
      control={form.control}
      name="stepType"
      render={({ field }) => (
        <FormItem>
          <FormLabel>Type d'étape</FormLabel>
          <FormControl>
            <Select
              value={field.value}
              onValueChange={(value: StepType) => {
                field.onChange(value);
                // Réinitialiser certains champs en fonction du type sélectionné
                if (value === 'transport') {
                  form.setValue('activity', 'Transport');
                } else if (value === 'meal') {
                  form.setValue('activity', 'Repas');
                } else if (value === 'accommodation') {
                  form.setValue('activity', 'Hébergement');
                } else if (value === 'break') {
                  form.setValue('activity', 'Pause');
                } else if (value === 'ticket') {
                  form.setValue('activity', 'Billet');
                }
              }}
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder="Sélectionnez un type d'étape" />
              </SelectTrigger>
              <SelectContent>
                {STEP_TYPES.map((type) => {
                  const { light, accent } = type.colors;
                  return (
                    <SelectItem
                      key={type.id}
                      value={type.id}
                      className="cursor-pointer"
                    >
                      <span
                        className="flex items-center gap-2 py-1 px-2 rounded-md"
                        style={{
                          backgroundColor: light,
                          color: accent,
                          borderLeft: `3px solid ${accent}`
                        }}
                      >
                        <span>{type.icon}</span>
                        <span>{type.label}</span>
                      </span>
                    </SelectItem>
                  );
                })}
              </SelectContent>
            </Select>
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
  );
}