import { useState } from 'react';

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

import sessionsTutorialCover_1 from 'src/assets/sessions-tutorial-cover-1.webp';
import sessionsTutorialCover_2 from 'src/assets/sessions-tutorial-cover-2.webp';
import { DialogContent } from 'src/pages/dashboard/Learning/common/components/DialogContent';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { LogEvents, logEvent } from 'src/utils/logging';

type SessionTutorialDialogProps = {
  onClose: () => void;
};

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

  const handleBack = () => setStep(step - 1);
  const handleNext = () => setStep(step + 1);

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

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

  const steps = [
    {
      id: 'live-sessions',
      contentProps: {
        title: t('session.tutorial_dialog.tab_1.title'),
        description: t('session.tutorial_dialog.tab_1.description'),
        secondaryDescription: t('session.tutorial_dialog.tab_1.description_2'),
        src: sessionsTutorialCover_1,
      },
      dialogProps: {
        primaryButtonProps: {
          children: t('general:next'),
          onClick: handleNext,
        },
      },
    },
    {
      id: 'session-reports',
      contentProps: {
        title: t('session.tutorial_dialog.tab_2.title'),
        description: t('session.tutorial_dialog.tab_2.description'),
        secondaryDescription: t('session.tutorial_dialog.tab_2.description_2'),
        src: sessionsTutorialCover_2,
      },
      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('session.tutorial_dialog.title')}
      body={<DialogContent {...contentProps} />}
      {...dialogProps}
    />
  );
};
