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

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

type PageProps = {
  currentQuestion: QuizQuestionPage;
};

export const Page = ({ currentQuestion }: PageProps) => {
  const theme = useTheme();

  return (
    <Box>
      <Typography variant="h5" sx={{ paddingBottom: "25px", color: theme.palette.text.primary,  wordBreak: "break-word"}} >{currentQuestion.title}</Typography>
        <Typography color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{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
              key={currentQuestion.id}
              src={currentQuestion.content.back}
              alt=""
              style={{
                display: "block",
                width: "100%",
                height: "100%",
                objectFit: "contain",
              }}
            />
          </Box>
        ) : (
          <YoutubeEmbedIframe
          containerSX={{
            width: "100%",
            height: "calc(100% - 270px)",
            maxHeight: "80vh",
            objectFit: "contain",
          }}
          videoUrl={currentQuestion.content.video}
          />
        )}
      </Box>
    </Box>
  );
};