import {
    Box,
    Button,
    Paper,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";


export default function QuizPreviewLayout() {
    const theme = useTheme();
    const quiz = useCurrentQuiz();
    const isTablet = useMediaQuery(theme.breakpoints.down(630));

    if (!quiz) return null;

    const isMediaFileExist =
        (quiz.config.startpage.background.type === "image" &&
            quiz.config.startpage.background.desktop) ||
        (quiz.config.startpage.background.type === "video" &&
            quiz.config.startpage.background.video);

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