import { MultiSelect } from '@/components/ui/multi-select';
import { FormElement } from '@/types/form-types';
import { useMemo } from 'react';

interface Option {
  value: string;
  label: string;
}

interface FormMultiSelectProps {
  element: FormElement;
  field: {
    value: string[];
    onChange: (value: string[]) => void;
  };
  dropdownOptions?: Array<{
    id: string | number;
    label: string;
  }>;
  defaultValues?: unknown[];
}

export const FormMultiSelect = ({
  element,
  field,
  dropdownOptions,
  defaultValues,
}: FormMultiSelectProps) => {
  const options: Option[] = useMemo(() => {
    if (element?.options?.length) {
      return element.options.map((opt) => ({
        value: String(opt.id),
        label: opt.label,
      }));
    }
    if (dropdownOptions?.length) {
      return dropdownOptions.map((option) => ({
        value: String(option.id),
        label: option.label,
      }));
    }
    return [];
  }, [element?.options, dropdownOptions]);

  return (
    <MultiSelect
      options={options}
      onValueChange={field.onChange}
      value={field.value || []}
      defaultValue={(defaultValues as string[]) ?? []}
      placeholder={element.title || 'Select options...'}
      maxCount={1}
    />
  );
};