import VisibilityIcon from "@mui/icons-material/Visibility";
import { Box, IconButton, useTheme, useMediaQuery } from "@mui/material";
import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview";
import { useLayoutEffect, useRef } from "react";
import { Rnd } from "react-rnd";
import QuizPreviewLayout from "./QuizPreviewLayout";
import ResizeIcon from "@icons/ResizeIcon";

const DRAG_PARENT_MARGIN = 0;
const NAVBAR_HEIGHT = 0;
const DRAG_PARENT_BOTTOM_MARGIN = 0;

interface RndPositionAndSize {
  x: number;
  y: number;
  width: string;
  height: string;
}

export const StartPagePreview = () => {
  const isPreviewShown = useQuizPreviewStore((state) => state.isPreviewShown);
  const rndParentRef = useRef<HTMLDivElement>(null);
  const rndRef = useRef<Rnd | null>(null);
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(630));
  const rndPositionAndSizeRef = useRef<RndPositionAndSize>({
    x: 0,
    y: 0,
    width: isTablet ? "350" : "600",
    height: "330",
  });
  const isFirstShowRef = useRef<boolean>(true);

  useLayoutEffect(
    function stickPreviewToBottomRight() {
      const rnd = rndRef.current;
      const rndSelfElement = rnd?.getSelfElement();
      if (
        !rnd ||
        !rndSelfElement ||
        !rndParentRef.current ||
        !isFirstShowRef.current
      )
        return;

      const rndParentRect = rndParentRef.current.getBoundingClientRect();
      const rndRect = rndSelfElement.getBoundingClientRect();

      const x = rndParentRect.width - rndRect.width;
      const y = rndParentRect.height - rndRect.height;

      rnd.updatePosition({ x, y });
      rndPositionAndSizeRef.current.x = x;
      rndPositionAndSizeRef.current.y = y;

      isFirstShowRef.current = false;
    },
    [isPreviewShown]
  );

  return (
    <Box
      ref={rndParentRef}
      sx={{
        position: "fixed",
        top: NAVBAR_HEIGHT + DRAG_PARENT_MARGIN,
        left: DRAG_PARENT_MARGIN,
        bottom: DRAG_PARENT_BOTTOM_MARGIN,
        right: DRAG_PARENT_MARGIN,
        pointerEvents: "none",
        zIndex: 100,
      }}
    >
      {isPreviewShown && (
        <Rnd
          minHeight={20}
          minWidth={20}
          bounds="parent"
          ref={rndRef}
          dragHandleClassName="quiz-preview-draghandle"
          default={{
            x: rndPositionAndSizeRef.current.x,
            y: rndPositionAndSizeRef.current.y,
            width: rndPositionAndSizeRef.current.width,
            height: rndPositionAndSizeRef.current.height,
          }}
          onResizeStop={(e, direction, ref, delta, position) => {
            rndPositionAndSizeRef.current.x = position.x;
            rndPositionAndSizeRef.current.y = position.y;
            rndPositionAndSizeRef.current.width = ref.style.width;
            rndPositionAndSizeRef.current.height = ref.style.height;
          }}
          onDragStop={(e, d) => {
            rndPositionAndSizeRef.current.x = d.x;
            rndPositionAndSizeRef.current.y = d.y;
          }}
          onDragStart={(e, d) => {
            e.preventDefault();
          }}
          enableResizing={{
            topLeft: isPreviewShown,
          }}
          resizeHandleComponent={{
            topLeft: <ResizeIcon />,
          }}
          resizeHandleStyles={{
            topLeft: {
              top: "-1px",
              left: "-1px",
            },
          }}
          style={{
            overflow: "hidden",
            pointerEvents: "auto",
            borderRadius: "5px",
          }}
        >
          <QuizPreviewLayout />
        </Rnd>
      )}
      <IconButton
        onClick={toggleQuizPreview}
        sx={{
          position: "absolute",
          right: 0,
          bottom: 0,
          pointerEvents: "auto",
        }}
      >
        <VisibilityIcon sx={{ height: "30px", width: "30px" }} />
      </IconButton>
    </Box>
  );
};
