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


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

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

    return (
        <ThemeProvider theme={lightTheme}>
            <Button
                className="pena-quiz-widget-button"
                onClick={() => setIsQuizDialogOpen(p => !p)}
                variant="contained"
                sx={[
                    {
                        // normal 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>
    );
}