/* eslint-disable @typescript-eslint/no-explicit-any */
'use client';

import { Control, useController } from 'react-hook-form';

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

import { FieldWrapper } from './FieldWrapper';

interface SelectFieldProps {
  control: Control<any>;
  name: string;
  label?: string;
  required?: boolean;
  placeholder?: string;
  options: { id: number | string; name: string }[];
}

export function SelectField(props: SelectFieldProps) {
  const {
    field,
    fieldState: { error },
  } = useController({ control: props.control, name: props.name });

  return (
    <FieldWrapper label={props.label} required={props.required} error={error?.message}>
      <Select
        value={field.value ? String(field.value) : 'none'}
        onValueChange={(value) =>
          value === 'none' ? field.onChange(undefined) : field.onChange(Number(value))
        }
      >
        <SelectTrigger className="rounded-none">
          <SelectValue placeholder={props.placeholder || 'Válasszon…'} />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="none">Nincs kiválasztva</SelectItem>
          {props.options.map((opt) => (
            <SelectItem key={opt.id} value={String(opt.id)}>
              {opt.name}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </FieldWrapper>
  );
}