import React, { FC, useEffect, useState } from 'react';
import {
  Container,
  Divider,
  Link,
  Title,
  TitleIconContainer,
  Bottom
} from './styles';
import { useTrackingContext } from '../../helpers/tracking/TrackingContextProvider';
import { handleClick } from './tracking-helpers';

export interface QuizleSideBarProps {
  sectionTitle: string;
  pageLink: string;
  quizleQuestion?: string;
}

export const QuizleSidebar: FC<QuizleSideBarProps> = ({
  sectionTitle,
  pageLink,
  quizleQuestion
}) => {
  const { fireAnalyticsEvent } = useTrackingContext();
  const [currentQuestion, setCurrentQuestion] = useState<string | null>(null);

  useEffect(
    () => {
      // Use the quizleQuestion prop if provided (it includes fallback logic in parent)
      if (quizleQuestion) {
        setCurrentQuestion(quizleQuestion);
      }
    },
    [quizleQuestion]
  );

  return (
    <Container data-testid="quizleSidebar">
      <>
        <TitleIconContainer>
          <div className="titleWrapper">
            <Link
              href={pageLink}
              onClick={() =>
                handleClick(
                  fireAnalyticsEvent,
                  'quizle sidebar: title selected'
                )
              }
              className="trigger"
            >
              <Title>{sectionTitle}</Title>
            </Link>
          </div>
          <img
            src="https://www.thetimes.com/d/img/puzzles/new-svg-icons/quizle-a15f1f6b66.svg"
            className="question-icon"
          />
        </TitleIconContainer>
      </>
      <Divider />
      <Bottom>
        <p>
          <span className="q-icon">Q: </span>
          {currentQuestion}
        </p>
        <Link
          href={pageLink}
          onClick={() =>
            handleClick(
              fireAnalyticsEvent,
              'quizle sidebar: test your knowledge'
            )
          }
          className="quizle-link"
        >
          Test your knowledge
          <span className="q-arrow" />
        </Link>
      </Bottom>
      <Divider />
    </Container>
  );
};