import { FC } from 'react';
import { useNavigate } from 'react-router';

import CloseIcon from '@material-hu/icons/material/Close';
import DialogActions from '@material-hu/mui/DialogActions';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogTitle from '@material-hu/mui/DialogTitle';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

import { serviceManagementRoutes } from 'src/pages/dashboard/serviceManagement/routes';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type CloseFormModalProps = {
  onClose: () => void;
};

const CloseFormModal: FC<CloseFormModalProps> = ({ onClose }) => {
  const { t } = useLokaliseTranslation('service_management');
  const navigate = useNavigate();

  return (
    <>
      <DialogTitle sx={{ px: 3, py: 2 }}>
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Typography variant="h6">{t('CLOSE_FORM_TITLE')}</Typography>
          <IconButton onClick={onClose}>
            <CloseIcon />
          </IconButton>
        </Stack>
      </DialogTitle>
      <DialogContent sx={{ px: 3, py: 2 }}>
        <Typography
          variant="body1"
          color="secondary"
        >
          {t('CLOSE_FORM_DESCRIPTION')}
        </Typography>
      </DialogContent>
      <DialogActions sx={{ px: 3, py: 2 }}>
        <Stack
          sx={{
            width: '100%',
            flexDirection: 'row',
            justifyContent: 'flex-end',
            gap: 1,
          }}
        >
          <Button
            onClick={() =>
              navigate(serviceManagementRoutes.userSide.serviceItems())
            }
          >
            {t('LEAVE')}
          </Button>
          <Button
            variant="contained"
            onClick={onClose}
          >
            {t('CONTINUE_COMPLETING')}
          </Button>
        </Stack>
      </DialogActions>
    </>
  );
};

export default CloseFormModal;
