import { useEffect, useState } from 'react';

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

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

import timeTrackingCoachmarkStep1En from 'src/assets/images/coachmark-approval-s1-en.webp';
import timeTrackingCoachmarkStep1Es from 'src/assets/images/coachmark-approval-s1-es.webp';
import timeTrackingCoachmarkStep2En from 'src/assets/images/coachmark-approval-s2-en.webp';
import timeTrackingCoachmarkStep2Es from 'src/assets/images/coachmark-approval-s2-es.webp';
import { Languages } from 'src/constants/languages';
import { useAuth } from 'src/contexts/JWTContext';
import useLocalStorage from 'src/hooks/useLocalStorage';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getTranslationLanguage } from 'src/utils/translations';

const ApprovalCoachmark = () => {
  const { t } = useLokaliseTranslation('time_tracker');
  const { user } = useAuth();

  const storageKey = `time-tracking-approval-coachmark-${user?.id}`;
  const [hasCompletedCoachmark, setHasCompletedCoachmark] =
    useLocalStorage<boolean>(storageKey, false);
  const [currentStep, setCurrentStep] = useState(0);

  // Intro modal
  const introModal = useModal(
    () => {
      const isLastStep = currentStep === 1;

      const handleNext = () => {
        if (isLastStep) {
          introModal.closeModal();
          setHasCompletedCoachmark(true);
        } else {
          setCurrentStep(currentStep + 1);
        }
      };

      const handleBack = () => {
        if (currentStep > 0) {
          setCurrentStep(currentStep - 1);
        }
      };

      const handleClose = () => {
        introModal.closeModal();
        setHasCompletedCoachmark(true);
      };

      const coachmarkImages: Record<string, { step1: string; step2: string }> =
        {
          [Languages.SPANISH]: {
            step1: timeTrackingCoachmarkStep1Es,
            step2: timeTrackingCoachmarkStep2Es,
          },
          [Languages.ENGLISH]: {
            step1: timeTrackingCoachmarkStep1En,
            step2: timeTrackingCoachmarkStep2En,
          },
        };

      const language = getTranslationLanguage(user!) || Languages.ENGLISH;
      const images =
        coachmarkImages[language] || coachmarkImages[Languages.ENGLISH];
      const step1Image = images.step1;
      const step2Image = images.step2;

      return (
        <Dialog
          onClose={handleClose}
          title={t(`time_tracker:approval_coachmark.modal_header`)}
          body={
            <Stack sx={{ alignItems: 'center', gap: 2 }}>
              <img
                src={currentStep === 0 ? step1Image : step2Image}
                alt=""
                style={{ height: 'auto', width: '110%' }}
              />
              <Stack>
                <Typography
                  variant="globalL"
                  sx={{ fontWeight: 'fontWeightSemiBold' }}
                >
                  {t(
                    `time_tracker:approval_coachmark.step${currentStep + 1}_title`,
                  )}
                </Typography>
                <Typography
                  variant="globalS"
                  sx={{
                    color: theme => theme.palette.new.text.neutral.lighter,
                  }}
                >
                  {t(
                    `time_tracker:approval_coachmark.step${currentStep + 1}_description`,
                  )}
                </Typography>
              </Stack>
            </Stack>
          }
          primaryButtonProps={{
            children: isLastStep ? t('general:understood') : t('general:next'),
            onClick: handleNext,
          }}
          secondaryButtonProps={
            currentStep === 1
              ? {
                  children: t('general:previous'),
                  onClick: handleBack,
                }
              : undefined
          }
        />
      );
    },
    {
      maxWidth: false,
      PaperProps: {
        sx: {
          width: 540,
          maxHeight: 'none',
          '& .MuiDialogContent-root': {
            overflow: 'visible',
            paddingTop: 0,
          },
        },
      },
    },
  );

  // Show intro modal when not completed
  useEffect(() => {
    if (!hasCompletedCoachmark) {
      introModal.showModal();
      setCurrentStep(0);
    }
  }, []);

  return <>{introModal.modal}</>;
};

export default ApprovalCoachmark;