import { Box, Typography, useTheme } from "@mui/material";

import { useQuizViewStore, updateAnswer } from "@root/quizView/store";

import type { QuizQuestionPage } from "../../../model/questionTypes/page";
import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";

type PageProps = {
  currentQuestion: QuizQuestionPage;
};

export const Page = ({ currentQuestion }: PageProps) => {
  const theme = useTheme();
  const { answers } = useQuizViewStore();
  const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};

  return (
    <Box>
      <Typography variant="h5" sx={{ paddingBottom: "25px", color: theme.palette.text.primary }}>{currentQuestion.title}</Typography>
        <Typography color={theme.palette.text.primary}>{currentQuestion.content.text}</Typography>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          width: "100%",
          marginTop: "20px",
        }}
      >
        {
        //@ts-ignore
        currentQuestion.content.useImage ? (
          <Box sx={{ borderRadius: "12px", border: "1px solid #9A9AAF", overflow: "hidden" }}>
            <img
              src={currentQuestion.content.back}
              alt=""
              style={{
                display: "block",
                width: "100%",
                height: "100%",
                objectFit: "contain",
              }}
            />
          </Box>
        ) : (
          <YoutubeEmbedIframe
            containerSX={{ width: "100%", height: "100%", maxHeight: "80vh", objectFit: "contain" }}
            videoUrl={currentQuestion.content.video}
          />
        )}
      </Box>
    </Box>
  );
};