import {
  Box,
  Button,
  Paper,
  Typography,
  useTheme,
  useMediaQuery,
} from "@mui/material";
import { useParams } from "react-router-dom";

import { quizStore } from "@root/quizes";

export default function QuizPreviewLayout() {
  const quizId = Number(useParams().quizId);
  const { listQuizes } = quizStore();
  const question = listQuizes[quizId];
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(630));
  const isMediaFileExist =
    (question.config.startpage.background.type === "image" &&
      question.config.startpage.background.desktop) ||
    (question.config.startpage.background.type === "video" &&
      question.config.startpage.background.video);

  return (
    <Paper className="quiz-preview-draghandle" sx={{ height: "100%" }}>
      <Box
        sx={{
          display: "flex",
          flexDirection:
            question.config.startpage.position === "ltr"
              ? "row"
              : "row-reverse",
          flexGrow: 1,
          height: "100%",
          "&::-webkit-scrollbar": { width: 0 },
        }}
      >
        <Box
          sx={{
            width: isMediaFileExist && !isTablet ? "40%" : "100%",
            padding: "16px",
            display: "flex",
            flexDirection: "column",
            alignItems: isMediaFileExist && !isTablet ? "flex-start" : "center",
          }}
        >
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              gap: "20px",
            }}
          >
            {question.config.startpage.background.type === "image" &&
              question.config.startpage.background.desktop && (
                <img
                  src={question.config.startpage.background.desktop}
                  style={{
                    height: "30px",
                    maxWidth: "50px",
                    objectFit: "cover",
                  }}
                  alt=""
                />
              )}
            <Typography sx={{ fontSize: "12px" }}>
              {question.config.info.orgname}
            </Typography>
          </Box>
          <Box
            sx={{
              flexGrow: 1,
              display: "flex",
              gap: "10px",
              flexDirection: "column",
              justifyContent: "center",
            }}
          >
            <Typography sx={{ fontWeight: "bold" }}>{question.name}</Typography>
            <Typography sx={{ fontSize: "12px" }}>
              {question.config.startpage.description}
            </Typography>
            <Box>
              {question.config.startpage.button && (
                <Button
                  variant="contained"
                  sx={{
                    fontSize: "16px",
                    padding: "10px 15px",
                  }}
                >
                  {question.config.startpage.button}
                </Button>
              )}
            </Box>
          </Box>
          <Box>
            <Typography
              sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}
            >
              {question.config.info.phonenumber}
            </Typography>
            <Typography sx={{ fontSize: "12px" }}>
              {question.config.info.law}
            </Typography>
          </Box>
        </Box>
        {!isTablet && isMediaFileExist && (
          <Box sx={{ width: "60%" }}>
            {question.config.startpage.background.type === "image" &&
              question.config.startpage.background.desktop && (
                <img
                  src={question.config.startpage.background.desktop}
                  alt=""
                  style={{
                    width: "100%",
                    height: "100%",
                    objectFit: "cover",
                  }}
                />
              )}
            {question.config.startpage.background.type === "video" &&
              question.config.startpage.background.video && (
                <video
                  src={question.config.startpage.background.video}
                  style={{
                    width: "100%",
                    height: "100%",
                    objectFit: "cover",
                  }}
                />
              )}
          </Box>
        )}
      </Box>
    </Paper>
  );
}