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

import { IconCheck, IconX } from '@material-hu/icons/tabler';
import Container from '@material-hu/mui/Container';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogTitle from '@material-hu/mui/DialogTitle';
import IconButton from '@material-hu/mui/IconButton';
import Link from '@material-hu/mui/Link';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuAvatar from '@material-hu/components/design-system/Avatar';
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 SuccessCreationModalProps = {
  id: string;
  title: string;
  automaticMessage?: string;
};

const SuccessCreationModal: FC<SuccessCreationModalProps> = ({
  id,
  title,
  automaticMessage,
}) => {
  const { t } = useLokaliseTranslation('service_management');
  const navigate = useNavigate();

  const handleClose = () => navigate(serviceManagementRoutes.servicePortal());

  return (
    <>
      <DialogTitle
        sx={{
          backgroundColor: ({ palette }) =>
            palette.new.background.layout.tertiary,
          borderBottom: ({ palette }) =>
            `1px solid ${palette.new.border.neutral.default}`,
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Typography
            variant="globalL"
            fontWeight="fontWeightSemiBold"
          >
            {title}
          </Typography>
          <IconButton
            onClick={handleClose}
            aria-label={t('close')}
          >
            <IconX />
          </IconButton>
        </Stack>
      </DialogTitle>
      <DialogContent
        sx={{
          pt: '128px !important',
          backgroundColor: ({ palette }) =>
            palette.new.background.layout.default,
        }}
      >
        <Container maxWidth="md">
          <Stack sx={{ gap: 2, alignItems: 'center', textAlign: 'center' }}>
            <HuAvatar
              Icon={IconCheck}
              color="success"
              size="large"
            />
            <Stack sx={{ gap: 0.5 }}>
              <Typography
                variant="globalL"
                sx={{
                  fontWeight: 'fontWeightSemiBold',
                }}
              >
                {t('success_creation_title', { title })}
              </Typography>
              <Typography
                variant="globalS"
                sx={{
                  color: ({ palette }) => palette.new.text.neutral.lighter,
                }}
              >
                {automaticMessage
                  ? automaticMessage
                  : t('success_creation_description')}
              </Typography>
            </Stack>
            <Stack
              sx={{ flexDirection: 'row', gap: 1, alignItems: 'center', mt: 1 }}
            >
              <Button
                size="large"
                variant="tertiary"
                LinkComponent={Link}
                href={serviceManagementRoutes.servicePortal()}
              >
                {t('go_back_my_requests')}
              </Button>
              <Button
                size="large"
                variant="primary"
                LinkComponent={Link}
                href={serviceManagementRoutes.userSide.detail(id)}
              >
                {t('go_to_details')}
              </Button>
            </Stack>
          </Stack>
        </Container>
      </DialogContent>
    </>
  );
};

export default SuccessCreationModal;
