import lightTheme from "@/utils/themes/light";
import { Button, ThemeProvider, useMediaQuery } from "@mui/material";
import { useState } from "react";
import { createPortal } from "react-dom";
import QuizDialog from "../QuizDialog";


const PADDING = 10;

interface Props {
    quizId: string;
    position: "left" | "right";
    buttonBackgroundColor?: string;
}

export default function QuizSideButton({ quizId, position, buttonBackgroundColor }: Props) {
    const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
    const isMobile = useMediaQuery("(max-width: 600px)");

    return createPortal(
        <ThemeProvider theme={lightTheme}>
            <QuizDialog
                open={isQuizShown}
                quizId={quizId}
                onClose={() => setIsQuizShown(false)}
                hideBackdrop
                disableScrollLock
                paperSx={[
                    {
                        m: 0,
                    },
                    !isMobile && {
                        position: "absolute",
                        bottom: PADDING,
                        right: position === "right" ? PADDING : undefined,
                        left: position === "left" ? PADDING : undefined,
                        height: `calc(min(calc(100% - ${PADDING * 2}px), 800px))`,
                        width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
                    },
                    isMobile && {
                        position: "relative",
                        height: "100%",
                        maxHeight: "100%",
                        width: "100%",
                        borderRadius: 0,
                    },
                ]}
            />
            <Button
                className="pena-quiz-widget-button"
                variant="contained"
                onClick={() => setIsQuizShown(true)}
                sx={[
                    {
                        display: isQuizShown ? "none" : "block",
                        position: "fixed",
                        height: "70px",
                        width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
                        backgroundColor: buttonBackgroundColor,
                    },
                    position === "left" && {
                        bottom: PADDING,
                        left: PADDING,
                    },
                    position === "right" && {
                        bottom: PADDING,
                        right: PADDING,
                    },
                ]}
            >
                Пройти квиз
            </Button>
        </ThemeProvider>,
        document.body
    );
}