frontAnswerer/src/widgets/side/QuizSideButton.tsx

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 "../shared/QuizDialog";
import RunningStripe from "../shared/RunningStripe";


const PADDING = 10;
const WIDGET_DEFAULT_WIDTH = "600px";
const WIDGET_DEFAULT_HEIGHT = "800px";

interface Props {
    quizId: string;
    position: "left" | "right";
    buttonBackgroundColor?: string;
    dimensions?: { width: string; height: string; };
    fullScreen?: boolean;
}

export default function QuizSideButton({ quizId, position, buttonBackgroundColor, dimensions, fullScreen = false }: 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 && !fullScreen) && {
                        position: "absolute",
                        bottom: PADDING,
                        right: position === "right" ? PADDING : undefined,
                        left: position === "left" ? PADDING : undefined,
                        width: dimensions?.width ?? WIDGET_DEFAULT_WIDTH,
                        maxWidth: `calc(100% - ${PADDING * 2}px)`,
                        height: dimensions?.height ?? WIDGET_DEFAULT_HEIGHT,
                        maxHeight: `calc(100% - ${PADDING * 2}px)`,
                    },
                    (isMobile || fullScreen) && {
                        position: "relative",
                        width: "100%",
                        height: "100%",
                        maxHeight: "100%",
                        borderRadius: 0,
                    },
                ]}
            />
            <Button
                className="pena-quiz-widget-button"
                variant="contained"
                onClick={() => setIsQuizShown(true)}
                disableFocusRipple
                sx={[
                    {
                        display: isQuizShown ? "none" : "block",
                        position: "fixed",
                        height: "70px",
                        width: "600px",
                        maxWidth: `calc(100% - ${PADDING * 2}px)`,
                        backgroundColor: buttonBackgroundColor,
                        overflow: "hidden",
                    },
                    position === "left" && {
                        bottom: PADDING,
                        left: PADDING,
                    },
                    position === "right" && {
                        bottom: PADDING,
                        right: PADDING,
                    },
                ]}
            >
                <RunningStripe />
                Пройти квиз
            </Button>
        </ThemeProvider>,
        document.body
    );
}