import { FC } from 'react';
import { Control } from 'react-hook-form';

import { QUALITY_OPTIONS } from 'src/constants/recognitions';
import { useTranslation } from 'src/pages/dashboard/recognitions/i18n';
import { IdeaObject } from 'src/types/recognitions';

import MultipleToggleControl from '../formControls/MultipleToggleControl';
import TextFieldControl from '../formControls/TextFieldControl';
import ToggleControl from '../formControls/ToggleControl';

export type QualityFormProps = {
  control?: Control;
  defaultValues?: IdeaObject;
  isReadOnly?: boolean;
};

export const QualityForm: FC<QualityFormProps> = props => {
  const { control = null, defaultValues = null, isReadOnly = false } = props;

  const { t } = useTranslation();

  return (
    <>
      <MultipleToggleControl
        name="defect"
        label={t('DEFECT_TYPE')}
        options={QUALITY_OPTIONS}
        control={control}
        defaultValue={defaultValues ? defaultValues.defect : ''}
        isReadOnly={isReadOnly}
        longText
      />
      <TextFieldControl
        name="defectDetail"
        label={t('DEFECT')}
        placeholder={t('DEFECT_PLACEHOLDER')}
        control={control}
        defaultValue={defaultValues ? defaultValues.defectDetail : ''}
        isReadOnly={isReadOnly}
      />
      <TextFieldControl
        name="zone"
        label={t('ZONE')}
        placeholder={t('DEFECT_ZONE')}
        control={control}
        defaultValue={defaultValues ? defaultValues.zone : ''}
        isReadOnly={isReadOnly}
      />
      <ToggleControl
        name="reduceInspections"
        label={t('REDUCE_INSPECTIONS')}
        control={control}
        defaultValue={defaultValues ? defaultValues.reduceInspections : ''}
        isReadOnly={isReadOnly}
      />
      <TextFieldControl
        name="improvedStandards"
        label={t('STANDARD_IMPROVE')}
        placeholder={t('STANDARD_CHANGE')}
        control={control}
        defaultValue={defaultValues ? defaultValues.improvedStandards : ''}
        isReadOnly={isReadOnly}
      />
    </>
  );
};

export default QualityForm;
