import { useState } from 'react';

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

import pathsNewFeatureCoverEn from 'src/assets/paths-new-feature-cover-en.webp';
import pathsNewFeatureCoverEs from 'src/assets/paths-new-feature-cover-es.webp';
import pathsStartTodayCover from 'src/assets/paths-start-today-cover.webp';
import { Languages } from 'src/constants/languages';
import useLanguage from 'src/hooks/useLanguage';
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 PathsNewFeatureDialogProps = {
  onClose: () => void;
};

const PathsNewFeatureDialog = ({ onClose }: PathsNewFeatureDialogProps) => {
  const [step, setStep] = useState(0);

  const { t } = useLokaliseTranslation('learning');
  const { language } = useLanguage();

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

  const handleNext = () => {
    logEvent(LogEvents.PATH_MODAL_NEXT);
    setStep(step + 1);
  };

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

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

  const steps = [
    {
      id: 'new-feature',
      contentProps: {
        src:
          language === Languages.SPANISH
            ? pathsNewFeatureCoverEs
            : pathsNewFeatureCoverEn,
        title: t('path.new_feature.title'),
        description: t('path.new_feature.description'),
      },
      dialogProps: {
        primaryButtonProps: {
          children: t('general:next'),
          onClick: handleNext,
        },
      },
    },
    {
      id: 'start_today',
      contentProps: {
        src: pathsStartTodayCover,
        title: t('path.start_today.title'),
        description: t('path.start_today.description'),
      },
      dialogProps: {
        secondaryButtonProps: {
          children: t('general:previous'),
          onClick: handleBack,
        },
        primaryButtonProps: {
          children: t('general:understood'),
          onClick: handleFinish,
        },
      },
    },
  ];

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

  return (
    <HuDialog
      onClose={handleClose}
      title={t('common.renew_learning_structure')}
      body={<DialogContent {...contentProps} />}
      {...dialogProps}
    />
  );
};

export default PathsNewFeatureDialog;
