import { IconCheck } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import useMediaQuery from '@material-hu/mui/useMediaQuery';

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

import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  onShowResponse: () => void;
  onBackToSurveys: () => void;
  automaticResponseMessage: string | undefined;
};

const SurveySuccessScreen = ({
  onShowResponse,
  onBackToSurveys,
  automaticResponseMessage,
}: Props) => {
  const { t } = useLokaliseTranslation('surveys');
  const theme = useTheme();
  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <Stack
      sx={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        gap: 1,
        px: 3,
        maxWidth: '800px',
        margin: '0 auto',
      }}
    >
      <Avatar
        Icon={IconCheck}
        color="success"
        size="large"
      />
      <Title
        centered
        variant="L"
        title={t('submission_success.title')}
        description={
          automaticResponseMessage ?? t('submission_success.description')
        }
      />
      <Stack
        sx={{
          flexDirection: { xs: 'column', sm: 'row' },
          gap: 2,
          mt: 3,
          width: { xs: 1, sm: 'auto' },
        }}
      >
        <Button
          fullWidth={isSmallScreen}
          variant="primary"
          size="large"
          onClick={onShowResponse}
        >
          {t('view_response')}
        </Button>
        <Button
          fullWidth={isSmallScreen}
          variant="tertiary"
          size="large"
          onClick={onBackToSurveys}
        >
          {t('back_to_surveys')}
        </Button>
      </Stack>
    </Stack>
  );
};

export default SurveySuccessScreen;