import { FC } from 'react';
import { useForm, Controller } from 'react-hook-form';

import Box from '@material-hu/mui/Box';
import Checkbox from '@material-hu/mui/Checkbox';
import Dialog from '@material-hu/mui/Dialog';
import DialogActions from '@material-hu/mui/DialogActions';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogTitle from '@material-hu/mui/DialogTitle';
import FormControlLabel from '@material-hu/mui/FormControlLabel';
import MenuItem from '@material-hu/mui/MenuItem';
import Select from '@material-hu/mui/Select';
import TextField from '@material-hu/mui/TextField';
import Typography from '@material-hu/mui/Typography';

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

import { useTranslation } from '../i18n';

export type DownloadDialogProps = {
  openDownloadDialog: boolean;
  handleCloseDownloadDialog: () => void;
  onDownloadChart: any;
  loading?: boolean;
};

export const DownloadDialog: FC<DownloadDialogProps> = props => {
  const {
    openDownloadDialog,
    handleCloseDownloadDialog,
    onDownloadChart,
    loading = false,
  } = props;

  const { t } = useTranslation();

  const { handleSubmit, control, watch, register } = useForm({
    defaultValues: {
      downloadValue: 'jpg',
      transparentBackground: false,
      customBackground: false,
      customColorBackground: '#FAFAFA',
    },
  });

  const onSubmit = data => onDownloadChart(data);

  return (
    <Dialog
      open={openDownloadDialog}
      onClose={handleCloseDownloadDialog}
      sx={{ borderRadius: '4px' }}
      maxWidth="xs"
      fullWidth
    >
      <DialogTitle sx={{ py: 3, pb: 2 }}>
        <Typography sx={{ fontSize: '20px', fontWeight: 700 }}>
          {t('DOWNLOADORGCHART')}
        </Typography>
      </DialogTitle>
      <form onSubmit={handleSubmit(onSubmit)}>
        <DialogContent sx={{ pb: 3, pt: 0 }}>
          <Typography sx={{ fontSize: '14px', mb: 0.5 }}>
            {t('FILE_FORMAT')}
          </Typography>
          <Controller
            rules={{ required: true }}
            control={control}
            name="downloadValue"
            render={({ field }) => (
              <Select
                value={watch('downloadValue')}
                displayEmpty
                fullWidth
                {...field}
                sx={{ borderRadius: '4px', height: '34px' }}
              >
                <MenuItem value="jpg">JPG</MenuItem>
                <MenuItem value="png">PNG</MenuItem>
                <MenuItem value="pdf">PDF</MenuItem>
                <MenuItem value="svg">SVG</MenuItem>
              </Select>
            )}
          />
          <Typography
            sx={{
              fontSize: '12px',
              mb: 0.5,
              color: '#6c6c6c',
              mt: 0.5,
              lineHeight: '1.4',
            }}
          >
            {t('DOWNLOAD_MODAL_DESCRIPTION')}
          </Typography>
          {watch('downloadValue') !== 'pdf' &&
            watch('downloadValue') !== 'svg' && (
              <>
                <Box sx={{ display: 'flex', alignItems: 'center' }}>
                  <FormControlLabel
                    sx={{ mr: 0 }}
                    control={<Checkbox />}
                    {...register('transparentBackground')}
                    name="transparentBackground"
                    label=""
                  />
                  <Typography sx={{ fontSize: '14px' }}>
                    {t('TRANSPARENT_BACKGROUND')}
                  </Typography>
                </Box>
                <Box sx={{ display: 'flex', alignItems: 'center' }}>
                  <FormControlLabel
                    sx={{ mr: 0 }}
                    control={<Checkbox />}
                    {...register('customBackground')}
                    name="customBackground"
                    label=""
                  />
                  <Typography sx={{ fontSize: '14px' }}>
                    {t('CUSTOM_BACKGROUND')}
                  </Typography>
                </Box>
                {watch('customBackground') && (
                  <TextField
                    sx={{
                      width: '160px',
                      '& .MuiInputBase-root': {
                        borderRadius: '4px',
                      },
                      '& .MuiOutlinedInput-input': {
                        p: 1,
                      },
                    }}
                    {...register('customColorBackground')}
                    value={watch('customColorBackground')}
                    type="color"
                    placeholder={t('CHOOSE_COLOR')}
                    name="customColorBackground"
                  />
                )}
              </>
            )}
        </DialogContent>
        <DialogActions sx={{ px: 3, pt: 0, pb: 3 }}>
          <Button
            onClick={handleCloseDownloadDialog}
            variant="text"
            disabled={loading}
            sx={{
              px: '12px',
              py: '6px',
              mr: 1,
              borderRadius: '4px',
              color: 'black !important',
              textTransform: 'uppercase',
            }}
          >
            <Typography sx={{ fontWeight: 700, fontSize: '13px' }}>
              {t('CANCEL')}
            </Typography>
          </Button>
          <Button
            type="submit"
            variant="contained"
            loading={loading}
            sx={{
              px: '12px',
              py: '6px',
              borderRadius: '4px',
              textTransform: 'uppercase',
            }}
          >
            <Typography sx={{ fontWeight: 700, fontSize: '13px' }}>
              {t('EXPORT')}
            </Typography>
          </Button>
        </DialogActions>
      </form>
    </Dialog>
  );
};

export default DownloadDialog;