import { QuizAnswerer } from "@/index";
import lightTheme from "@/utils/themes/light";
import { Box, Button, Grow, ThemeProvider } from "@mui/material";
import { useState } from "react";
import { createPortal } from "react-dom";


const PADDING = 10;

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

export default function QuizSideButton({ quizId, position, buttonColor }: Props) {
    const [isQuizShown, setIsQuizShown] = useState<boolean>(false);

    return createPortal(
        <ThemeProvider theme={lightTheme}>
            {isQuizShown ? (
                <Grow in={true}>
                    <Box
                        sx={[
                            {
                                position: "fixed",
                                height: `calc(min(calc(100% - ${PADDING * 2}px), 800px))`,
                                width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
                            },
                            position === "left" && {
                                bottom: PADDING,
                                left: PADDING,
                            },
                            position === "right" && {
                                bottom: PADDING,
                                right: PADDING,
                            },
                        ]}
                    >
                        <QuizAnswerer
                            quizId={quizId}
                            changeFaviconAndTitle={false}
                            disableGlobalCss
                        />
                    </Box>
                </Grow>
            ) : (
                <Button
                    className="pena-quiz-widget-button"
                    variant="contained"
                    onClick={() => setIsQuizShown(true)}
                    sx={[
                        {
                            position: "fixed",
                            height: "70px",
                            width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
                            color: buttonColor,
                        },
                        position === "left" && {
                            bottom: PADDING,
                            left: PADDING,
                        },
                        position === "right" && {
                            bottom: PADDING,
                            right: PADDING,
                        },
                    ]}
                >
                    Пройти квиз
                </Button>
            )}
        </ThemeProvider>,
        document.body
    );
}