frontPanel/src/pages/Questions/DraggableList/QuestionPageCard.tsx

import { useState, useRef, useEffect } from "react";
import { useParams } from "react-router-dom";
import {
  Box,
  Checkbox,
  FormControl,
  FormControlLabel,
  IconButton,
  InputAdornment,
  Paper,
  TextField,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useDebouncedCallback } from "use-debounce";

import { ChooseAnswerModal } from "./ChooseAnswerModal";
import TypeQuestions from "../TypeQuestions";
import SwitchQuestionsPage from "../SwitchQuestionsPage";

import {
  questionStore,
  updateQuestionsList,
  createQuestion,
  copyQuestion,
  removeQuestion,
  removeQuestionForce,
} from "@root/questions";

import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { OneIcon } from "@icons/questionsPage/OneIcon";
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import { CopyIcon } from "@icons/questionsPage/CopyIcon";
import CrossedEyeIcon from "@icons/CrossedEyeIcon";
import { HideIcon } from "@icons/questionsPage/hideIcon";
import Answer from "@icons/questionsPage/answer";
import OptionsPict from "@icons/questionsPage/options_pict";
import OptionsAndPict from "@icons/questionsPage/options_and_pict";
import Emoji from "@icons/questionsPage/emoji";
import Input from "@icons/questionsPage/input";
import DropDown from "@icons/questionsPage/drop_down";
import Date from "@icons/questionsPage/date";
import Slider from "@icons/questionsPage/slider";
import Download from "@icons/questionsPage/download";
import Page from "@icons/questionsPage/page";
import RatingIcon from "@icons/questionsPage/rating";
import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
import { ReactComponent as PlusIcon } from "../../../assets/icons/plus.svg";

import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
import type { QuizQuestionBase } from "../../../model/questionTypes/shared";

interface Props {
  totalIndex: number;
  draggableProps: DraggableProvidedDragHandleProps | null | undefined;
  isDragging: boolean;
}

const IconAndrom = (isExpanded: boolean, switchState: string) => {
  switch (switchState) {
    case "variant":
      return (
        <Answer
          color={isExpanded ? "#9A9AAF" : "white"}
          sx={{ height: "22px", width: "20px" }}
        />
      );
    case "images":
      return (
        <OptionsPict
          color={isExpanded ? "#9A9AAF" : "white"}
          sx={{ height: "22px", width: "20px" }}
        />
      );
    case "varimg":
      return (
        <OptionsAndPict
          color={isExpanded ? "#9A9AAF" : "white"}
          sx={{ height: "22px", width: "20px" }}
        />
      );
    case "emoji":
      return (
        <Emoji
          color={isExpanded ? "#9A9AAF" : "white"}
          sx={{ height: "22px", width: "20px" }}
        />
      );
    case "text":
      return (
        <Input
          color={isExpanded ? "#9A9AAF" : "white"}
          sx={{ height: "22px", width: "20px" }}
        />
      );
    case "select":
      return (
        <DropDown
          color={isExpanded ? "#9A9AAF" : "white"}
          sx={{ height: "22px", width: "20px" }}
        />
      );
    case "date":
      return (
        <Date
          color={isExpanded ? "#9A9AAF" : "white"}
          sx={{ height: "22px", width: "20px" }}
        />
      );
    case "number":
      return (
        <Slider
          color={isExpanded ? "#9A9AAF" : "white"}
          sx={{ height: "22px", width: "20px" }}
        />
      );
    case "file":
      return (
        <Download
          color={isExpanded ? "#9A9AAF" : "white"}
          sx={{ height: "22px", width: "20px" }}
        />
      );
    case "page":
      return (
        <Page
          color={isExpanded ? "#9A9AAF" : "white"}
          sx={{ height: "22px", width: "20px" }}
        />
      );
    case "rating":
      return (
        <RatingIcon
          color={isExpanded ? "#9A9AAF" : "white"}
          sx={{ height: "22px", width: "20px" }}
        />
      );
    default:
      return <></>;
  }
};
export default function QuestionsPageCard({
  totalIndex,
  draggableProps,
  isDragging,
}: Props) {
  const [plusVisible, setPlusVisible] = useState<boolean>(false);
  const [open, setOpen] = useState<boolean>(false);
  const quizId = Number(useParams().quizId);
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const { listQuestions } = questionStore();
  const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;
  const anchorRef = useRef(null);
  const debounced = useDebouncedCallback((title) => {
    updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, { title });
  }, 1000);

  useEffect(() => {
    if (question.deleteTimeoutId) {
      clearTimeout(question.deleteTimeoutId);
    }
  }, [question]);

  return (
    <>
      <Paper
        id={String(totalIndex)}
        sx={{
          maxWidth: "796px",
          width: "100%",
          borderRadius: "8px",
          backgroundColor: question.expanded ? "white" : "#333647",
        }}
      >
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            padding: isTablet
              ? isMobile
                ? "20px 20px 0px 20px"
                : "20px 10px 20px 20px "
              : "20px 10px 20px 20px",
            flexDirection: isMobile ? "column-reverse" : null,
          }}
        >
          <FormControl
            variant="standard"
            sx={{
              p: 0,
              maxWidth: isTablet ? "549px" : "640px",
              width: "100%",
              marginRight: isMobile ? "0px" : "16.1px",
            }}
          >
            <TextField
              defaultValue={question.title}
              placeholder={"Заголовок вопроса"}
              onChange={({ target }) => debounced(target.value)}
              InputProps={{
                startAdornment: (
                  <Box>
                    <InputAdornment
                      ref={anchorRef}
                      position="start"
                      sx={{ cursor: "pointer" }}
                      onClick={() => setOpen((isOpened) => !isOpened)}
                    >
                      {IconAndrom(question.expanded, question.type)}
                    </InputAdornment>
                    <ChooseAnswerModal
                      open={open}
                      onClose={() => setOpen(false)}
                      anchorRef={anchorRef}
                      totalIndex={totalIndex}
                      switchState={question.type}
                    />
                  </Box>
                ),
              }}
              sx={{
                "& .MuiInputBase-root": {
                  color: question.expanded ? "#9A9AAF" : "white",
                  backgroundColor: question.expanded
                    ? theme.palette.background.default
                    : "transparent",
                  height: "48px",
                  borderRadius: "10px",
                  ".MuiOutlinedInput-notchedOutline": {
                    borderWidth: "1px !important",
                  },
                },
              }}
              inputProps={{
                sx: {
                  fontSize: "18px",
                  lineHeight: "21px",
                  py: 0,
                  paddingLeft: question.type.length === 0 ? 0 : "18px",
                },
              }}
            />
          </FormControl>
          <Box
            sx={{
              display: "flex",
              alignItems: "flex-start",
              width: isMobile ? "100%" : "auto",
              position: "relative",
              height: "30px",
              marginBottom: "10px",
            }}
          >
            <Box
              sx={{
                display: "flex",
                alignItems: "center",
              }}
            >
              <IconButton
                sx={{ paddingBottom: isMobile ? "0" : "" }}
                disableRipple
                onClick={() =>
                  updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
                    expanded: !question.expanded,
                  })
                }
              >
                {question.expanded ? (
                  <ArrowDownIcon
                    style={{
                      width: "18px",
                      color: "#4D4D4D",
                    }}
                  />
                ) : (
                  <ExpandLessIcon fill="#7E2AEA" />
                )}
              </IconButton>
              {question.expanded ? (
                <></>
              ) : (
                <Box sx={{ display: "flex", borderRight: "solid 1px white" }}>
                  <FormControlLabel
                    control={
                      <Checkbox
                        icon={<HideIcon style={{ color: "#7E2AEA" }} />}
                        checkedIcon={<CrossedEyeIcon />}
                      />
                    }
                    label={""}
                    sx={{
                      color: theme.palette.grey2.main,
                      ml: "-9px",
                      mr: 0,
                      userSelect: "none",
                    }}
                  />
                  <IconButton onClick={() => copyQuestion(quizId, totalIndex)}>
                    <CopyIcon style={{ color: "white" }} />
                  </IconButton>
                  <IconButton
                    sx={{
                      cursor: "pointer",
                      borderRadius: "6px",
                      padding: "2px",
                    }}
                    onClick={() => {
                      const removedId = question.id;
                      if (question.deleteTimeoutId) {
                        clearTimeout(question.deleteTimeoutId);
                      }

                      removeQuestion(quizId, totalIndex);

                      const newTimeoutId = window.setTimeout(() => {
                        removeQuestionForce(quizId, removedId);
                      }, 5000);

                      updateQuestionsList<QuizQuestionBase>(
                        quizId,
                        totalIndex,
                        {
                          ...question,
                          deleteTimeoutId: newTimeoutId,
                        }
                      );
                    }}
                  >
                    <DeleteIcon style={{ color: "white" }} />
                  </IconButton>
                </Box>
              )}

              <OneIcon style={{ fontSize: "30px", marginRight: "-2px" }} />
            </Box>
            <IconButton
              disableRipple
              sx={{
                padding: isMobile ? "0" : "5px 10px 8px 8px",
                position: isMobile ? "absolute" : "relative",
                right: isMobile ? "0" : null,
                bottom: isMobile ? "0" : null,
              }}
              {...draggableProps}
            >
              <PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
            </IconButton>
          </Box>
        </Box>
        {question.expanded && (
          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
              padding: 0,
              borderRadius: "12px",
            }}
          >
            {question.type.length === 0 ? (
              <TypeQuestions totalIndex={totalIndex} />
            ) : (
              <SwitchQuestionsPage totalIndex={totalIndex} />
            )}
          </Box>
        )}
      </Paper>
      <Box
        onMouseEnter={() => setPlusVisible(true)}
        onMouseLeave={() => setPlusVisible(false)}
        sx={{
          maxWidth: "825px",
          display: "flex",
          alignItems: "center",
          height: "40px",
          cursor: "pointer",
        }}
      >
        <Box
          onClick={() => createQuestion(quizId, "", totalIndex + 1)}
          sx={{
            display: plusVisible && !isDragging ? "flex" : "none",
            width: "100%",
            alignItems: "center",
            columnGap: "10px",
          }}
        >
          <Box
            sx={{
              boxSizing: "border-box",
              width: "100%",
              height: "1px",
              backgroundPosition: "bottom",
              backgroundRepeat: "repeat-x",
              backgroundSize: "20px 1px",
              backgroundImage:
                "radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
            }}
          />
          <PlusIcon />
        </Box>
      </Box>
    </>
  );
}