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)))",
            maxWidth: "100%",
            height: "80%",
            maxHeight: "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: 0,
          borderTopLeftRadius: 0,
          borderBottomLeftRadius: "4px",
          borderBottomRightRadius: 0,
          "&:hover": {
            backgroundColor: "rgba(0, 0, 0, 0.7)",
          },
        }}
      >
        <CloseIcon sx={{ color: "white" }} />
      </IconButton>
    </Dialog>
  );
}
