import { RefObject } from 'react';


import { FormGroup } from '@/components/form/FormGroup';
import { UseFormidableReturn } from '@/components/form/Formidable';
import { SelectSingle } from '@/components/select/SelectSingle';

export type FormSelectProps = {
  // Generic Form input
  form: UseFormidableReturn;
  // Form: Name of the variable
  variableName: 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>;
  // if a suggestion exist at the auto compleat
  suggestion?: string;
};

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