import { useQuizData } from "@/api/hooks";
import { SideWidgetComponentProps } from "@/model/widget/side";
import lightTheme from "@/utils/themes/light";
import { Button, Fade, ThemeProvider, useMediaQuery } from "@mui/material";
import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import QuizDialog from "../shared/QuizDialog";
import RunningStripe from "../shared/RunningStripe";
import { useAutoOpenTimer } from "../shared/useAutoOpenTimer";

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

export default function QuizSideButton({
  quizId,
  position,
  buttonBackgroundColor,
  buttonTextColor,
  dialogDimensions,
  fullScreen = false,
  buttonText,
  buttonFlash = false,
  autoShowWidgetTime = 0,
  autoShowQuizTime = null,
  hideOnMobile = false,
}: SideWidgetComponentProps) {
  const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
  const isMobile = useMediaQuery("(max-width: 600px)");
  const { data: quizData } = useQuizData(quizId);
  const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash);
  const isWidgetHidden = useAutoOpenTimer(autoShowWidgetTime);
  const preventQuizAutoShowRef = useRef<boolean>(false);

  useEffect(
    function setAutoShowQuizTimer() {
      if (autoShowQuizTime === null) return;

      const timeout = setTimeout(() => {
        if (!preventQuizAutoShowRef.current) setIsQuizShown(true);
      }, autoShowQuizTime * 1000);

      return () => {
        clearTimeout(timeout);
      };
    },
    [autoShowQuizTime]
  );

  function openQuiz() {
    preventQuizAutoShowRef.current = true;
    setIsQuizShown(true);
    setIsFlashEnabled(false);
  }

  if (hideOnMobile && isMobile) return null;
  if (!quizData) return null;

  const isQuizCompleted = quizData.settings?.cfg?.antifraud ? quizData.recentlyCompleted : false;
  const showButtonFlash = !isQuizCompleted && isFlashEnabled;

  return createPortal(
    <ThemeProvider theme={lightTheme}>
      <QuizDialog
        open={isQuizShown}
        quizId={quizId}
        onClose={() => setIsQuizShown(false)}
        hideBackdrop
        disableScrollLock
        paperSx={[
          {
            m: 0,
          },
          isMobile || fullScreen
            ? {
                width: "100%",
                height: "100%",
                maxHeight: "100%",
                borderRadius: 0,
              }
            : {
                position: "absolute",
                bottom: PADDING,
                right: position === "right" ? PADDING : undefined,
                left: position === "left" ? PADDING : undefined,
                width: dialogDimensions?.width ?? WIDGET_DEFAULT_WIDTH,
                maxWidth: `calc(100% - ${PADDING * 2}px)`,
                height: dialogDimensions?.height ?? WIDGET_DEFAULT_HEIGHT,
                maxHeight: `calc(100% - ${PADDING * 2}px)`,
              },
        ]}
      />
      <Fade
        in={!isWidgetHidden}
        timeout={400}
      >
        <Button
          className="pena-quiz-widget-button"
          variant="contained"
          onClick={openQuiz}
          disableFocusRipple
          sx={[
            {
              display: isQuizShown ? "none" : "block",
              position: "fixed",
              height: "70px",
              width: "600px",
              maxWidth: `calc(100% - ${PADDING * 2}px)`,
              backgroundColor: buttonBackgroundColor,
              color: buttonTextColor,
              overflow: "hidden",
            },
            position === "left" && {
              bottom: PADDING,
              left: PADDING,
            },
            position === "right" && {
              bottom: PADDING,
              right: PADDING,
            },
          ]}
        >
          {buttonText || "Пройти квиз"}
          {showButtonFlash && <RunningStripe />}
        </Button>
      </Fade>
    </ThemeProvider>,
    document.body
  );
}
