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

import Box from '@material-hu/mui/Box';
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 FormGroup from '@material-hu/mui/FormGroup';
import Radio from '@material-hu/mui/Radio';
import Typography from '@material-hu/mui/Typography';

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

import BottomOrientation from 'src/pages/dashboard/orgChart/components/icons/BottomOrientation';
import LeftOrientation from 'src/pages/dashboard/orgChart/components/icons/LeftOrientation';
import RightOrientation from 'src/pages/dashboard/orgChart/components/icons/RightOrientation';
import TopOrientation from 'src/pages/dashboard/orgChart/components/icons/TopOrientation';

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

export type OrientationDialogProps = {
  openOrientationDialog: boolean;
  handleCloseOrientationDialog: () => void;
  onOrientationChart: any;
};

export const OrientationDialog: FC<OrientationDialogProps> = props => {
  const {
    openOrientationDialog,
    handleCloseOrientationDialog,
    onOrientationChart,
  } = props;

  const { t } = useTranslation();

  const { handleSubmit, control, watch } = useForm({
    defaultValues: {
      orientationLayout: '',
    },
  });

  const onSubmit = data => onOrientationChart(data);

  return (
    <Dialog
      open={openOrientationDialog}
      onClose={handleCloseOrientationDialog}
      sx={{ borderRadius: '4px' }}
      maxWidth="xs"
      fullWidth
    >
      <DialogTitle sx={{ py: 3, pb: 2 }}>
        <Typography sx={{ fontSize: '20px', fontWeight: 700 }}>
          {t('ORIENTATION_TITLE')}
        </Typography>
      </DialogTitle>
      <form onSubmit={handleSubmit(onSubmit)}>
        <DialogContent sx={{ pb: 3, pt: 0 }}>
          <Controller
            rules={{ required: true }}
            control={control}
            name="orientationLayout"
            render={({ field }) => (
              <FormGroup {...field}>
                <FormControlLabel
                  sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    ml: 0,
                  }}
                  value="top"
                  control={<Radio />}
                  checked={watch('orientationLayout') === 'top'}
                  label={
                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
                      <TopOrientation />
                      <Typography sx={{ ml: 1 }}>
                        {t('TOP_ORIENTATION')}
                      </Typography>
                    </Box>
                  }
                  labelPlacement="start"
                />
                <FormControlLabel
                  sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    ml: 0,
                  }}
                  value="left"
                  control={<Radio />}
                  checked={watch('orientationLayout') === 'left'}
                  label={
                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
                      <LeftOrientation />
                      <Typography sx={{ ml: 1 }}>
                        {t('LEFT_ORIENTATION')}
                      </Typography>
                    </Box>
                  }
                  labelPlacement="start"
                />
                <FormControlLabel
                  sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    ml: 0,
                  }}
                  value="bottom"
                  control={<Radio />}
                  checked={watch('orientationLayout') === 'bottom'}
                  label={
                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
                      <BottomOrientation />
                      <Typography sx={{ ml: 1 }}>
                        {t('BOTTOM_ORIENTATION')}
                      </Typography>
                    </Box>
                  }
                  labelPlacement="start"
                />
                <FormControlLabel
                  sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    ml: 0,
                  }}
                  value="right"
                  control={<Radio />}
                  checked={watch('orientationLayout') === 'right'}
                  label={
                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
                      <RightOrientation />
                      <Typography sx={{ ml: 1 }}>
                        {t('RIGHT_ORIENTATION')}
                      </Typography>
                    </Box>
                  }
                  labelPlacement="start"
                />
              </FormGroup>
            )}
          />
        </DialogContent>
        <DialogActions sx={{ px: 3, pt: 0, pb: 3 }}>
          <Button
            onClick={handleCloseOrientationDialog}
            variant="text"
            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"
            sx={{
              px: '12px',
              py: '6px',
              borderRadius: '4px',
              textTransform: 'uppercase',
            }}
          >
            <Typography sx={{ fontWeight: 700, fontSize: '13px' }}>
              {t('CHANGE')}
            </Typography>
          </Button>
        </DialogActions>
      </form>
    </Dialog>
  );
};

export default OrientationDialog;
