import { useTranslation } from 'react-i18next';

import { Button, IconButton, Stack, Typography, useTheme } from '@mui/material';
import { IconX } from '@tabler/icons-react';

import Title from '../../Title';
import { type CoachMarkStepWithRef } from '../types';

type TooltipContentProps = {
  step: CoachMarkStepWithRef;
  currentStep: number;
  steps: CoachMarkStepWithRef[];
  hideFooterOnOnlyOneStep: boolean;
  setCurrentStep: (step: number) => void;
  onDismiss: () => void;
  onFinish: () => void;
  customEndLabel?: string;
  onStepChange?: (step: number) => void;
};

const TooltipContent = ({
  step,
  currentStep,
  steps,
  hideFooterOnOnlyOneStep,
  setCurrentStep,
  onDismiss,
  onFinish,
  customEndLabel,
  onStepChange,
}: TooltipContentProps) => {
  const theme = useTheme();
  const { spacing } = theme;
  const { t } = useTranslation();
  const isLastStep = currentStep === steps.length;
  const textColor = theme.palette.new.text.neutral.inverted;
  const hideFooter = steps.length === 1 && hideFooterOnOnlyOneStep;

  return (
    <>
      <IconButton
        aria-label={t('general:close')}
        onClick={() => {
          onDismiss();
        }}
        sx={{
          position: 'absolute',
          top: spacing(1.5),
          right: spacing(1.5),
          backgroundColor:
            theme.palette.new.action.button.background.tertiary.hover,
          p: spacing(0.5),
          svg: {
            color: theme.palette.new.background.elements.inverted,
          },
        }}
      >
        <IconX size={16} />
      </IconButton>
      {step.image && (
        <img
          src={step.image}
          alt=""
          style={{
            borderTopLeftRadius: spacing(2),
            borderTopRightRadius: spacing(2),
            height: 176,
            width: '100%',
          }}
        />
      )}
      <Stack sx={{ px: 2, my: 2 }}>
        <Title
          variant="S"
          title={step.title}
          description={step.description}
          sx={{
            '.MuiTypography-root': {
              color: textColor,
            },
          }}
        />
      </Stack>
      {!hideFooter && (
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: steps.length > 1 ? 'space-between' : 'flex-end',
            borderTop: `1px solid ${theme.palette.new.border.neutral.divider}`,
            p: 2,
          }}
        >
          {steps.length > 1 && (
            <>
              <Typography
                variant="globalXS"
                sx={{
                  color: textColor,
                }}
              >
                {t('general:loaded_of_total', {
                  loaded: currentStep,
                  total: steps.length,
                })}
              </Typography>
              {currentStep === 1 && (
                <Button
                  variant="secondary"
                  onClick={onDismiss}
                >
                  {t('general:skip')}
                </Button>
              )}
              {currentStep !== 1 && (
                <Button
                  variant="secondary"
                  onClick={() => {
                    setCurrentStep(currentStep - 1);
                    onStepChange?.(currentStep - 1);
                  }}
                >
                  {t('general:back_alt')}
                </Button>
              )}
            </>
          )}
          {isLastStep && (
            <Button
              variant="primary"
              onClick={onFinish}
            >
              {customEndLabel || t('general:finish')}
            </Button>
          )}
          {!isLastStep && (
            <Button
              variant="primary"
              onClick={() => {
                setCurrentStep(currentStep + 1);
                onStepChange?.(currentStep + 1);
              }}
            >
              {t('general:next')}
            </Button>
          )}
        </Stack>
      )}
    </>
  );
};

export default TooltipContent;
