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

import { appearFromBottom } from '@material-hu/utils/animations';
import Avatar from '@material-hu/components/design-system/Avatar';
import Dialog from '@material-hu/components/design-system/Dialog';
import Title from '@material-hu/components/design-system/Title';

import useRestrictedTranslation from 'src/hooks/useRestrictedTranslation';

import { MODALS_DIMENSIONS } from './constants';

type NpsSurveyConfirmationDialogContentProps = {
  onCloseModal: () => void;
};

const NpsSurveyConfirmationDialogContent = ({
  onCloseModal,
}: NpsSurveyConfirmationDialogContentProps) => {
  const { t } = useRestrictedTranslation('backoffice_only');

  return (
    <Dialog
      title={t('nps_survey_flow_dialog.confirmation_title')}
      body={
        <Stack
          sx={{
            gap: 2,
            px: 12,
            alignItems: 'center',
            maxHeight: 'fit-content',
            overflowY: 'hidden',
            animation: `${appearFromBottom} 0.5s ease-in-out`,
          }}
        >
          <Avatar
            Icon={IconCheck}
            color="success"
            size="large"
          />

          <Title
            title={t('nps_survey_flow_dialog.confirmation_text')}
            variant="S"
            centered
          />
        </Stack>
      }
      sx={{ maxWidth: MODALS_DIMENSIONS }}
      onClose={onCloseModal}
      primaryButtonProps={{
        children: t('general:exit'),
        onClick: onCloseModal,
      }}
    />
  );
};

export default NpsSurveyConfirmationDialogContent;