import QuizAnswerer from "@/components/QuizAnswerer";
import CloseIcon from '@mui/icons-material/Close';
import { Dialog, IconButton, Slide, SlideProps, SxProps, Theme } from "@mui/material";
import { forwardRef } from "react";


const SlideTransition = forwardRef<unknown, SlideProps>((props, ref) => {
    return (
        <Slide direction="up" ref={ref} {...props} />
    );
});

interface Props {
    open?: boolean;
    quizId: string;
    paperSx?: SxProps<Theme>;
    hideBackdrop?: boolean;
    disableScrollLock?: boolean;
    onClose?: () => void;
}

export default function QuizDialog({
    open = true,
    quizId,
    paperSx = [],
    hideBackdrop,
    disableScrollLock,
    onClose
}: Props) {

    return (
        <Dialog
            open={open}
            onClose={onClose}
            keepMounted
            hideBackdrop={hideBackdrop}
            disableScrollLock={disableScrollLock}
            TransitionComponent={SlideTransition}
            PaperProps={{
                sx: [
                    {
                        backgroundColor: "transparent",
                        width: "calc(min(100%, max(70%, 700px)))",
                        height: "80%",
                        maxWidth: "100%",
                        m: "16px",
                    },
                    ...(Array.isArray(paperSx) ? paperSx : [paperSx])
                ]
            }}
        >
            <QuizAnswerer
                quizId={quizId}
                changeFaviconAndTitle={false}
                disableGlobalCss
            />
            <IconButton
                onClick={onClose}
                sx={{
                    position: "absolute",
                    zIndex: 10,
                    top: 0,
                    right: 0,
                    backgroundColor: "rgba(0, 0, 0, 0.5)",
                    borderTopRightRadius: "4px",
                    borderTopLeftRadius: 0,
                    borderBottomLeftRadius: "4px",
                    borderBottomRightRadius: 0,
                    "&:hover": {
                        backgroundColor: "rgba(0, 0, 0, 0.7)",
                    },
                }}
            >
                <CloseIcon sx={{ color: "white" }} />
            </IconButton>
        </Dialog>
    );
}