// 'use client';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@repo/shadcn/select';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@repo/shadcn/form';
import { UpdateUser, updateUser } from '@/feactures/users/schemas/users';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

interface SelectListProps {
    label: string
    // values: 
    values: Array<object>
    form: any
    name: string
    handleChange: any
}

export function SelectList({ label, values, form, name, handleChange }: SelectListProps) {
    // const { label, values, form, name } = props;
    // handleChange

    // const defaultformValues = {
    //     username:  '',
    //     fullname:  '',
    //     email:  '',
    //     password: '',
    //     id: 0,
    //     phone:  '',
    //     role: undefined,
    //     isActive: false
    // }

    // const form = useForm<UpdateUser>({
    //     resolver: zodResolver(updateUser),
    //     defaultValues: defaultformValues,
    //     mode: 'onChange', // Enable real-time validation
    // });


    return <FormField
                control={form.control}
                name={name}
                render={({ field }) => (
                  <FormItem className="w-full">
                    <FormLabel>{label}</FormLabel>
                    <Select onValueChange={handleChange}
                      // defaultValue={String(field.value)}
                    >
                      <FormControl>
                        <SelectTrigger className="w-full">
                          <SelectValue placeholder="Selecciona una opción" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent className="w-full min-w-[200px]">
                        {values.map((item: any) => (
                          <SelectItem key={item.id} value={item.id}>
                            {item.name}
                          </SelectItem>
                        ))}
                        {/* <SelectItem key={0} value="0">Hola1</SelectItem>
                        <SelectItem key={1} value="1">Hola2</SelectItem> */}
                        {/* {Object.entries(values).map(([id, label]) => (
                          <SelectItem key={id} value={id}>
                            {label}
                          </SelectItem>
                        ))} */}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
}