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

import Button from '@material-hu/components/design-system/Buttons/Button';
import FormSwitcher from '@material-hu/components/design-system/Switcher/form';
import Title from '@material-hu/components/design-system/Title';

import { LearningCard } from 'src/pages/dashboard/Learning/common/components/LearningCard';
import { useLokaliseTranslation } from 'src/utils/i18n';

import useSessionCertificateModal from '../../../hooks/useSessionCertificateModal';
import { useSessionStatus } from '../../../hooks/useSessionStatus';

const SessionCertificate = () => {
  const { t } = useLokaliseTranslation('learning');
  const { blockSessionEdition } = useSessionStatus();

  const { modal: certificateModal, showModal: showCertificateModal } =
    useSessionCertificateModal();

  return (
    <>
      {certificateModal}
      <LearningCard
        id="session-configuration-certificate-card"
        sx={{ '& .MuiCardContent-root': { gap: 1 } }}
      >
        <Stack sx={{ width: '100%' }}>
          <Title
            variant="S"
            title={t('common.certificate')}
          />
          <FormSwitcher
            name="configuration.issueCertificate"
            switcherProps={{
              description: t('session.certificate.description'),
              disabled: blockSessionEdition,
            }}
          />
        </Stack>
        <Button
          onClick={showCertificateModal}
          disabled={blockSessionEdition}
          sx={{
            px: 1,
            py: 0.5,
            ml: -1,
            alignSelf: 'flex-start',
          }}
        >
          {t('common.view_certificate_model')}
        </Button>
      </LearningCard>
    </>
  );
};

export default SessionCertificate;