import { useFormContext, useWatch } from 'react-hook-form';

import { useModal } from '@material-hu/hooks/useModal';
import { useTheme } from '@material-hu/mui/styles';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuFormSwitcher from '@material-hu/components/design-system/Switcher/form';

import { newPathFields } from 'src/pages/dashboard/Learning/Paths/New/form';
import { type NewPathFormValues } from 'src/pages/dashboard/Learning/Paths/types';
import { getSwitchersSx } from 'src/pages/dashboard/Learning/Paths/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CertificateModel from './CertificateModel';

const ConfigurationCertificate = () => {
  const { t } = useLokaliseTranslation(['learning']);
  const theme = useTheme();

  const { control } = useFormContext<NewPathFormValues>();

  const certificateEnabled = useWatch({
    control,
    name: 'configuration.issueCertificate',
  });

  const { modal: certificateModal, showModal: showCertificateModal } = useModal(
    CertificateModel,
    {
      fullWidth: true,
      sx: {
        '& .MuiPaper-root': {
          maxWidth: '1020px',
          height: '682px',
          borderRadius: 0,
          overflow: 'hidden',
        },
      },
    },
  );

  const handleSeeCertificateModel = () => showCertificateModal();

  return (
    <>
      {certificateModal}
      <HuCardContainer
        fullWidth
        sx={{
          '& .MuiCardContent-root': {
            ...getSwitchersSx(theme),
            gap: 2,
            alignItems: 'start',
          },
        }}
      >
        <HuFormSwitcher
          name={newPathFields.configuration.issueCertificate()}
          switcherProps={{
            title: t(`common.completion_certificate`),
            description: t(`path.certificate.description`),
          }}
        />
        {certificateEnabled && (
          <Button
            onClick={handleSeeCertificateModel}
            variant="tertiary"
          >
            {t(`common.view_certificate_model`)}
          </Button>
        )}
      </HuCardContainer>
    </>
  );
};

export default ConfigurationCertificate;