import { useState } from 'react';

import Dialog from '@material-hu/components/design-system/Dialog';

import certificatesModal1 from 'src/assets/certificates-modal1.webp';
import certificatesModal2 from 'src/assets/certificates-modal2.webp';
import { DialogContent } from 'src/pages/dashboard/Learning/common/components/DialogContent';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { LogEvents, logEvent } from 'src/utils/logging';

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

const CertificatesNewFeatureDialog = ({
  onClose,
}: CertificatesNewFeatureDialogProps) => {
  const [step, setStep] = useState(0);
  const { t } = useLokaliseTranslation('learning');

  const handleBack = () => setStep(Math.max(0, step - 1));

  const handleNext = () => {
    logEvent(LogEvents.CERTIFICATES_MODAL_NEXT);
    setStep(Math.min(steps.length - 1, step + 1));
  };

  const handleFinish = () => {
    logEvent(LogEvents.CERTIFICATES_MODAL_FINISH);
    onClose();
  };

  const handleClose = () => {
    logEvent(LogEvents.CERTIFICATES_MODAL_CLOSE);
    onClose();
  };

  const steps = [
    {
      id: 'step-1',
      contentProps: {
        src: certificatesModal1,
        title: t('settings.certificates.modal.step1.title'),
        description: t('settings.certificates.modal.step1.description'),
      },
      dialogProps: {
        primaryButtonProps: {
          children: t('general:next'),
          onClick: handleNext,
        },
      },
    },
    {
      id: 'step-2',
      contentProps: {
        src: certificatesModal2,
        title: t('settings.certificates.modal.step2.title'),
        description: t('settings.certificates.modal.step2.description'),
      },
      dialogProps: {
        secondaryButtonProps: {
          children: t('general:previous'),
          onClick: handleBack,
        },
        primaryButtonProps: {
          children: t('general:understood'),
          onClick: handleFinish,
        },
      },
    },
  ];

  const { contentProps, dialogProps } = steps[step];

  return (
    <Dialog
      onClose={handleClose}
      title={t('settings.certificates.modal.header')}
      body={<DialogContent {...contentProps} />}
      {...dialogProps}
    />
  );
};

export default CertificatesNewFeatureDialog;