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

import Typography from '@material-hu/mui/Typography';

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

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

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

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

  const { t } = useTranslation();

  return (
    <>
      <Typography sx={{ mt: 2, pl: 1, fontStyle: 'italic' }}>
        {t('BEFORE')}
      </Typography>
      <TextFieldControl
        name="sapCode"
        label={t('SAP_CODE')}
        control={control}
        defaultValue={defaultValues ? defaultValues.sapCode : ''}
        isReadOnly={isReadOnly}
        isRequired
      />
      <TextFieldControl
        name="usageFrecuency"
        label={t('FREQUENCY_USED')}
        defaultValue={defaultValues ? defaultValues.usageFrecuency : ''}
        isReadOnly={isReadOnly}
        control={control}
      />
      <TextFieldControl
        name="unityCost"
        label={t('COST_CONSUMABLE')}
        defaultValue={defaultValues ? defaultValues.unityCost : ''}
        isReadOnly={isReadOnly}
        control={control}
      />
      <Typography sx={{ mt: 2, pl: 1, fontStyle: 'italic' }}>
        {t('AFTER')}
      </Typography>
      <TextFieldControl
        name="usageFrecuencyAfter"
        label={t('FREQUENCY_USED')}
        defaultValue={defaultValues ? defaultValues.usageFrecuencyAfter : ''}
        isReadOnly={isReadOnly}
        control={control}
      />
      <TextFieldControl
        name="unityCostAfter"
        label={t('COST_CONSUMABLE')}
        defaultValue={defaultValues ? defaultValues.unityCostAfter : ''}
        isReadOnly={isReadOnly}
        control={control}
      />
      <TextFieldControl
        name="improvedStandards"
        label={t('STANDARD_IMPROVE')}
        placeholder={t('STANDARD_CHANGE')}
        defaultValue={defaultValues ? defaultValues.improvedStandards : ''}
        isReadOnly={isReadOnly}
        control={control}
        isRequired
      />
    </>
  );
};

export default CostReductionForm;
