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


interface Props {
    selector?: string;
    fixedSide?: "left" | "right";
    quizId: string;
}

export default function OpenQuizButton({ selector, quizId, fixedSide }: Props) {
    const [isQuizDialogOpen, setIsQuizDialogOpen] = useState<boolean>(false);

    const portalContainer = !fixedSide && selector ? document.querySelector(selector)! : document.body;

    return createPortal(
        <ThemeProvider theme={lightTheme}>
            <Button
                className="pena-quiz-widget-button"
                onClick={() => setIsQuizDialogOpen(p => !p)}
                variant="contained"
                sx={[
                    {
                        // generic styles
                    },
                    Boolean(fixedSide) && {
                        position: "fixed",
                        bottom: "50%",
                    },
                    fixedSide === "left" && {
                        left: 0,
                        transformOrigin: "left",
                        transform: "rotate(-90deg) translateY(50%) translateX(-50%)",
                    },
                    fixedSide === "right" && {
                        right: 0,
                        transformOrigin: "right",
                        transform: "rotate(-90deg) translateY(-50%) translateX(50%)",
                    },
                ]}
            >
                Пройти квиз
            </Button>
            <QuizDialog
                open={isQuizDialogOpen}
                quizId={quizId}
                onClose={() => setIsQuizDialogOpen(false)}
            />
        </ThemeProvider>,
        portalContainer
    );
}