import { RefObject } from 'react';

import { FormGroup } from '@/components/form/FormGroup';
import { SelectMultiple } from '@/components/select/SelectMultiple';

import {
  useFormidableContext,
  useFormidableContextElement,
} from '../formidable';

export type FormSelectMultipleProps = {
  // Form: Name of the variable
  name: string;
  // Forward object reference
  ref?: RefObject<any>;
  // Form: Label of the input
  label?: string;
  // Form: Placeholder if nothing is selected
  placeholder?: string;
  // Form: Specify if the element is required or not
  isRequired?: boolean;
  // List of object options
  options: object[];
  // in the option specify the value Key
  keyInputKey?: string;
  // in the option specify the value field
  keyInputValue?: string;
  // Add capability to add an item (no key but only value)
  addNewItem?: (data: string) => Promise<any>;
};

export const FormSelectMultiple = ({
  name,
  ref,
  placeholder,
  options,
  keyInputKey = 'id',
  keyInputValue = 'name',
  addNewItem,
  ...rest
}: FormSelectMultipleProps) => {
  const { form, value, isModify, onChange, onRestore } =
    useFormidableContextElement(name);
  // if set add capability to add the search item
  const onCreate = !addNewItem
    ? undefined
    : (data: string) => {
        addNewItem(data).then((data: object) =>
          form.setValues({
            [name]: [...(form.values[name] ?? []), data[keyInputKey]],
          })
        );
      };
  return (
    <FormGroup name={name} {...rest}>
      <SelectMultiple
        //ref={ref}
        values={value}
        options={options}
        onChange={(value) => onChange(value)}
        keyKey={keyInputKey}
        keyValue={keyInputValue}
        onCreate={onCreate}
      />
    </FormGroup>
  );
};
