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

import Box from '@material-hu/mui/Box';
import CardContent from '@material-hu/mui/CardContent';

import Button from '@material-hu/components/design-system/Buttons/Button';

import DesktopDatePickerControl from 'src/pages/dashboard/recognitions/components/formControls/DesktopDatePickerControl';
import ImageControl from 'src/pages/dashboard/recognitions/components/formControls/ImageControl';
import ToggleControl from 'src/pages/dashboard/recognitions/components/formControls/ToggleControl';
import { useTranslation } from 'src/pages/dashboard/recognitions/i18n';

export type ImplementationDataFormProps = {
  onAddEndImage: any;
  endImage: any;
};

export const ImplementationDataForm: FC<
  ImplementationDataFormProps
> = props => {
  const { onAddEndImage, endImage } = props;

  const { t } = useTranslation();
  const { control, watch } = useFormContext();

  return (
    <CardContent sx={{ p: 2 }}>
      <ToggleControl
        name="ideaImplementedAfter"
        label={t('IDEA_IMPLEMENTED')}
        control={control}
        isRequired
      />
      {watch('ideaImplementedAfter') && (
        <Box sx={{ mt: 1 }}>
          <DesktopDatePickerControl
            name="implementationDate"
            label={t('IMPLEMENTATION_DATE')}
          />
          <Box sx={{ mt: 3, ml: 1 }}>
            <ImageControl
              image={endImage}
              onAddImage={onAddEndImage}
              title={t('ATTACH_IMAGE_AFTER')}
            />
          </Box>
          <Box
            sx={{ display: 'flex', width: '100%', justifyContent: 'flex-end' }}
          >
            <Button
              variant="contained"
              type="submit"
            >
              {t('UPDATE_IDEA')}
            </Button>
          </Box>
        </Box>
      )}
    </CardContent>
  );
};

export default ImplementationDataForm;