import React, { useMemo } from 'react';
import styled, { CSSProperties } from 'styled-components';
import { uiColors } from '../../constants/uiColors';
import { ZoomableImage } from '../Image/ZoomableImage';
import { Stepper } from '../Stepper';
import { DynamicText } from '../typography/DynamicText';

export interface ITutorialLesson {
  title: string;
  body?: React.ReactNode | string;
  text?: string;
  image: string;
  imageUrl?: string;
}

export interface ITutorialStepperProps {
  lessons: ITutorialLesson[];
  onLessonFinish: () => void;
  imageStyle?: CSSProperties;
}

export const TutorialStepper = React.memo(
  ({ lessons, onLessonFinish, imageStyle }: ITutorialStepperProps) => {
    const generateLessons = useMemo(
      () =>
        lessons.map((lesson, index) => ({
          component: (
            <LessonContainer key={index} className="lesson-container">
              <LessonTitle className="lesson-title">{lesson.title}</LessonTitle>
              {lesson.image && (
                <LessonImageWrapper className="lesson-image-wrapper">
                  <LessonImage className="lesson-image" style={imageStyle}>
                    {lesson.imageUrl ? (
                      <a
                        href={lesson.imageUrl}
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <ZoomableImage
                          src={lesson.image}
                          alt={lesson.title || 'Tutorial image'}
                        />
                      </a>
                    ) : (
                      <ZoomableImage
                        src={lesson.image}
                        alt={lesson.title || 'Tutorial image'}
                      />
                    )}
                  </LessonImage>
                </LessonImageWrapper>
              )}
              <LessonFooter className="lesson-footer">
                {lesson.body && (
                  <LessonBody
                    className="lesson-body"
                    dangerouslySetInnerHTML={{ __html: lesson.body as string }}
                  ></LessonBody>
                )}
                {lesson.text && <DynamicText text={lesson.text} />}
              </LessonFooter>
            </LessonContainer>
          ),
          id: index,
        })),
      [lessons, imageStyle]
    );

    return (
      <Container>
        <Stepper
          steps={generateLessons}
          finalCTAButton={{
            label: 'Close',
            onClick: onLessonFinish,
          }}
          useSideArrows
        />
      </Container>
    );
  }
);

const LessonImageWrapper = styled.div`
  width: 100%;
  max-width: 500px;
  margin: 1rem auto;
  aspect-ratio: auto; /* Allow the image to define its own aspect ratio */
  border-radius: 10px;
`;

const LessonBody = styled.div``;

const Container = styled.div`
  width: 80%;
  max-width: 600px;

  @media (max-width: 600px) {
    width: 95%;
  }
`;

const LessonFooter = styled.div`
  margin-top: 1rem;
`;

const LessonImage = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 500px;
  margin: auto;

  img {
    width: 100%;
    height: auto;
    object-fit: contain; /* Ensures the entire image is visible */
    border-radius: 10px;
  }
`;

const LessonTitle = styled.h1`
  color: ${uiColors.yellow} !important;
  font-size: 0.8rem !important;
`;

const LessonContainer = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px; /* Match with StepperBody for consistent height */

  p {
    // make font size consistent with rest
    font-size: 0.7rem !important;
  }
`;
