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

import { useParams } from "react-router-dom";
import {
  Box,
  Checkbox,
  FormControl,
  FormControlLabel,
  IconButton,
  InputAdornment,
  Paper,
  TextField,
  useTheme,
} from "@mui/material";
import TypeQuestions from "../TypeQuestions";
import SwitchQuestionsPage from "../SwitchQuestionsPage";

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

import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
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 type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";

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

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,
}: Props) {
  const quizId = Number(useParams().quizId);
  const theme = useTheme();
  const { listQuestions } = questionStore();
  const { type: switchState, expanded: isExpanded } =
    listQuestions[quizId][totalIndex];

  return (
    <Paper
      id={String(totalIndex)}
      sx={{
        maxWidth: "796px",
        width: "100%",
        borderRadius: "12px",
        margin: "20px 0",
        backgroundColor: isExpanded ? "white" : "#333647",
      }}
    >
      <Box
        sx={{
          width: "100%",
          maxWidth: "760px",
          display: "flex",
          alignItems: "center",
          gap: "10px",
          padding: "20px",
        }}
      >
        <FormControl fullWidth variant="standard" sx={{ p: 0 }}>
          <TextField
            fullWidth
            value={listQuestions[quizId][totalIndex].title}
            placeholder={"Заголовок вопроса"}
            onChange={(e) => {
              updateQuestionsList(quizId, totalIndex, {
                title: e.target.value,
              });
              console.log(listQuestions[quizId][totalIndex].title);
            }}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  {IconAndrom(isExpanded, switchState)}
                </InputAdornment>
              ),
            }}
            sx={{
              "& .MuiInputBase-root": {
                color: isExpanded ? "#9A9AAF" : "white",
                backgroundColor: isExpanded
                  ? theme.palette.background.default
                  : "transparent",
                height: "48px",
                borderRadius: "10px",
              },
            }}
            inputProps={{
              sx: {
                borderRadius: "10px",
                fontSize: "18px",
                lineHeight: "21px",
                py: 0,
                paddingLeft: switchState.length === 0 ? 0 : "18px",
              },
            }}
          />
        </FormControl>

        <IconButton
          onClick={() =>
            updateQuestionsList(quizId, totalIndex, { expanded: !isExpanded })
          }
        >
          {isExpanded ? <ExpandMoreIcon /> : <ExpandLessIcon fill="#7E2AEA" />}
        </IconButton>
        {isExpanded ? (
          <></>
        ) : (
          <Box sx={{ display: "flex", borderRight: "solid 1px white" }}>
            <FormControlLabel
              control={
                <Checkbox
                  icon={<HideIcon color={"#7E2AEA"} />}
                  checkedIcon={<CrossedEyeIcon />}
                />
              }
              label={""}
              sx={{
                color: theme.palette.grey2.main,
                ml: "-9px",
                mr: 0,
                userSelect: "none",
              }}
            />
            <IconButton onClick={() => copyQuestion(quizId, totalIndex)}>
              <CopyIcon color={"white"} />
            </IconButton>
            <IconButton
              sx={{ cursor: "pointer", borderRadius: "6px", padding: "2px" }}
              onClick={() => removeQuestion(quizId, totalIndex)}
            >
              <DeleteIcon color={"white"} />
            </IconButton>
          </Box>
        )}

        <OneIcon />
        <IconButton {...draggableProps}>
          <PointsIcon />
        </IconButton>
      </Box>
      {isExpanded && (
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            padding: 0,
            borderRadius: "12px",
          }}
        >
          {switchState.length === 0 ? (
            <TypeQuestions totalIndex={totalIndex} />
          ) : (
            <SwitchQuestionsPage totalIndex={totalIndex} />
          )}
        </Box>
      )}
    </Paper>
  );
}