frontAnswerer/src/widgets/side/QuizSideButton.tsx

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";


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);

    return createPortal(
        <ThemeProvider theme={lightTheme}>
            <QuizDialog
                open={isQuizShown}
                quizId={quizId}
                onClose={() => setIsQuizShown(false)}
                hideBackdrop
                disableScrollLock
                paperSx={{
                    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))`,
                    m: 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
    );
}