import Close 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 { useLokaliseTranslation } from 'src/utils/i18n';

import SatisfactionSurveyForm from './SatisfactionSurveyForm';

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

export const SatisfactionSurveyModal = ({
  onClose,
}: SatisfactionSurveyModalProps) => {
  const { t } = useLokaliseTranslation('learning');

  return (
    <>
      <Stack
        component={DialogTitle}
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}
      >
        <Typography
          variant="h6"
          component="span"
        >
          {t('course.lesson.satisfaction_survey')}
        </Typography>
        <IconButton
          onClick={onClose}
          arial-label={t('general:close')}
        >
          <Close />
        </IconButton>
      </Stack>
      <DialogContent>
        <SatisfactionSurveyForm />
      </DialogContent>
      <DialogActions sx={{ pt: 0, pb: 5, px: 3 }}>
        <Button
          onClick={onClose}
          variant="contained"
          fullWidth
        >
          {t('general:close')}
        </Button>
      </DialogActions>
    </>
  );
};

export default SatisfactionSurveyModal;