import { useEffect } from "react";
import {
  Box,
  Button,
  IconButton,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import {
  collapseAllQuestions,
  createUntypedQuestion,
} from "@root/questions/actions";
import {
  decrementCurrentStep,
  incrementCurrentStep,
} from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
import { createPortal } from "react-dom";
import AddPlus from "../../assets/icons/questionsPage/addPlus";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import { DraggableList } from "./DraggableList";
import { setDefaultState } from "@root/questions/actions";

export default function QuestionsPage() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(660));
  const quiz = useCurrentQuiz();

  useEffect(() => {
    const setDefault = ({ code }: KeyboardEvent) => {
      if (code === "Backslash") {
        setDefaultState(Number(quiz?.id));
      }
    };

    document.addEventListener("keydown", setDefault);

    return () => {
      document.removeEventListener("keydown", setDefault);
    };
  }, []);

  if (!quiz) return null;

  return (
    <>
      <Box
        sx={{
          maxWidth: "796px",
          width: "100%",
          display: "flex",
          justifyContent: "space-between",
          margin: "60px 0 40px 0",
        }}
      >
        <Typography variant={"h5"}>Заголовок квиза</Typography>
        <Button
          sx={{
            fontSize: "16px",
            lineHeight: "19px",
            padding: 0,
            textDecoration: "underline",
            color: theme.palette.brightPurple.main,
            textDecorationColor: theme.palette.brightPurple.main,
          }}
          onClick={collapseAllQuestions}
        >
          Свернуть всё
        </Button>
      </Box>
      <DraggableList />
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          maxWidth: "796px",
        }}
      >
        <IconButton
          onClick={() => {
            createUntypedQuestion(quiz.backendId);
          }}
          sx={{
            position: "fixed",
            left: isMobile ? "20px" : "250px",
            bottom: "20px",
          }}
          data-cy="create-question"
        >
          <AddPlus />
        </IconButton>
        <Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
          <Button
            variant="outlined"
            sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
            data-cy="back-button"
            onClick={decrementCurrentStep}
          >
            <ArrowLeft />
          </Button>
          <Button
            variant="contained"
            sx={{
              height: "44px",
              padding: "10px 20px",
              borderRadius: "8px",
              background: theme.palette.brightPurple.main,
              fontSize: "18px",
            }}
            onClick={incrementCurrentStep}
          >
            Следующий шаг
          </Button>
        </Box>
      </Box>
      {createPortal(<QuizPreview />, document.body)}
    </>
  );
}