import { FormControl } from '@websolutespa/bom-mixer-forms';
import { FieldAccept } from './field-accept';
import { FieldAutocomplete } from './field-autocomplete';
import { FieldCard } from './field-card';
import { FieldCheckbox } from './field-checkbox';
import { FieldCombobox } from './field-combobox';
import { FieldConsent } from './field-consent';
import { FieldImplicit } from './field-implicit';
import { FieldPassword } from './field-password';
import { FieldRadio } from './field-radio';
import { FieldSelect } from './field-select';
import { FieldText } from './field-text';
import { FieldTextArea } from './field-textarea';

/*
  * Here we define the types of form fields.
*/
export type FieldType =
  'accept' |
  'autocomplete' |
  'card' |
  'checkbox' |
  'combobox' |
  'consent' |
  'implicit' |
  'password' |
  'radio' |
  'select' |
  'text' |
  'textarea';

/*
  * Here we define the types of form fields.
*/
export const FIELDS: IFields = {
  accept: (control) => <FieldAccept control={control} />,
  autocomplete: (control) => <FieldAutocomplete control={control} />,
  card: (control) => <FieldCard control={control} />,
  checkbox: (control) => <FieldCheckbox control={control} />,
  combobox: (control) => <FieldCombobox control={control} />,
  consent: (control) => <FieldConsent control={control} />,
  implicit: (control) => <FieldImplicit control={control} />,
  password: (control) => <FieldPassword control={control} />,
  radio: (control) => <FieldRadio control={control} />,
  select: (control) => <FieldSelect control={control} />,
  text: (control) => <FieldText control={control} />,
  textarea: (control) => <FieldTextArea control={control} />,
};

export type IFields = {
  [key in FieldType]: (control: FormControl) => React.JSX.Element;
};