import { useEffect, useRef, useState } from 'react';

import Box from '@material-hu/mui/Box';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { useDialogLayerItem } from '@material-hu/components/layers/Dialogs';

import monthlyDragModalStep1 from 'src/assets/images/shifts-modal-s1.webp';
import monthlyDragModalStep2 from 'src/assets/images/shifts-modal-s2.webp';
import monthlyDragModalStep3 from 'src/assets/images/shifts-modal-s3.webp';
import { useAuth } from 'src/contexts/JWTContext';
import useLocalStorage from 'src/hooks/useLocalStorage';
import { useLokaliseTranslation } from 'src/utils/i18n';

const DIALOG_ID = 'shifts-monthly-drag-modal';
const TOTAL_STEPS = 3;

const STEP_IMAGES = [
  monthlyDragModalStep1,
  monthlyDragModalStep2,
  monthlyDragModalStep3,
];

const MonthlyDragModal = () => {
  const { t } = useLokaliseTranslation('shifts');
  const { user } = useAuth();

  const storageKey = `shifts-monthly-drag-modal-${user?.id}`;
  const [hasCompletedModal, setHasCompletedModal] = useLocalStorage<boolean>(
    storageKey,
    false,
  );
  const [currentStep, setCurrentStep] = useState(0);
  const hasOpenedRef = useRef(false);

  const isLastStep = currentStep === TOTAL_STEPS - 1;
  const isFirstStep = currentStep === 0;

  const handleComplete = () => {
    setHasCompletedModal(true);
    closeDialog();
  };

  const { openDialog, closeDialog } = useDialogLayerItem(DIALOG_ID, {
    title: t('modal.header'),
    onClose: handleComplete,
    body: (
      <Stack sx={{ alignItems: 'center', gap: 2 }}>
        <img
          src={STEP_IMAGES[currentStep]}
          alt=""
          style={{ height: 'auto', width: '110%' }}
        />
        <Stack sx={{ flexDirection: 'row', gap: 1 }}>
          {Array.from({ length: TOTAL_STEPS }).map((_, index) => (
            <Box
              // eslint-disable-next-line react/no-array-index-key
              key={index}
              sx={{
                width: 8,
                height: 8,
                borderRadius: '50%',
                backgroundColor: theme =>
                  index === currentStep
                    ? theme.palette.new.border.states.focus
                    : theme.palette.new.border.neutral.default,
              }}
            />
          ))}
        </Stack>
        <Stack>
          <Typography
            variant="globalL"
            sx={{ fontWeight: 'fontWeightSemiBold' }}
          >
            {t(`modal.step${currentStep + 1}_title`)}
          </Typography>
          <Typography
            variant="globalS"
            sx={{
              color: theme => theme.palette.new.text.neutral.lighter,
            }}
          >
            {t(`modal.step${currentStep + 1}_description`)}
          </Typography>
        </Stack>
      </Stack>
    ),
    primaryButtonProps: {
      children: isLastStep ? t('general:understood') : t('general:next'),
      onClick: () => {
        if (isLastStep) {
          handleComplete();
        } else {
          setCurrentStep(currentStep + 1);
        }
      },
    },
    secondaryButtonProps: !isFirstStep
      ? {
          children: t('general:previous'),
          onClick: () => setCurrentStep(currentStep - 1),
        }
      : undefined,
    dialogProps: {
      maxWidth: false,
      PaperProps: {
        sx: {
          width: 540,
          maxHeight: 'none',
          '& .MuiDialogContent-root': {
            overflow: 'visible',
            paddingTop: 0,
          },
        },
      },
    },
  });

  useEffect(() => {
    if (!hasCompletedModal && !hasOpenedRef.current) {
      hasOpenedRef.current = true;
      openDialog();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return null;
};

export default MonthlyDragModal;
