frontPanel/src/pages/Questions/answerOptions/AnswerOptions.tsx

import {
  Box,
  Typography,
  Link,
  useTheme,
  TextField,
  FormControl,
  InputAdornment,
  IconButton,
} from "@mui/material";
import React, { useState } from "react";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
import SwitchAnswerOptions from "./switchAnswerOptions";
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
import QuestionsPageCard from "../DraggableList/QuestionPageCard";
import { useParams } from "react-router-dom";
import { Variants, questionStore, updateQuestionsList } from "@root/questions";
import PointsIcon from "@icons/questionsPage/PointsIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import MessageIcon from "@icons/messagIcon";
import Popover from "@mui/material/Popover";
import TextareaAutosize from "@mui/base/TextareaAutosize";

import type { KeyboardEvent } from "react";
// Импортируем интерфейс Varian

interface Props {
  totalIndex: number;
}

export default function AnswerOptions({ totalIndex }: Props) {
  const { listQuestions } = questionStore();
  const Answer = listQuestions[totalIndex].content.variants;
  console.log(Answer);
  const theme = useTheme();
  const [switchState, setSwitchState] = React.useState("setting");
  const SSHC = (data: string) => {
    setSwitchState(data);
  };

  const [isOpen, setIsOpen] = React.useState(false);
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
    null
  );

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  const id = "my-popover-id";

  const addNewAnswer = () => {
    const answerNew = Answer.slice(); // Create a shallow copy of the array
    answerNew.push({ answer: "", answerLong: "", hints: "" });

    updateQuestionsList(totalIndex, {
      content: { ...listQuestions[totalIndex].content, variants: answerNew },
    });
  };

  return (
    <>
      <Box sx={{ padding: "0 20px 20px 20px" }}>
        {Answer.length === 0 ? (
          <Typography
            sx={{
              padding: "0 0 33px 80px",
              fontWeight: 400,
              fontSize: "18px",
              lineHeight: "21.33px",
              color: theme.palette.grey2.main,
            }}
          >
            Добавьте ответ
          </Typography>
        ) : (
          <Box>
            {Answer.map((variant: Variants, index: number) => (
              <FormControl
                key={index}
                fullWidth
                variant="standard"
                sx={{ p: "0 0 20px 0" }}
              >
                <TextField
                  value={variant.answer}
                  fullWidth
                  autoFocus
                  placeholder={"Добавьте ответ"}
                  onChange={(e) => {
                    const answerNew = Answer.slice(); // Create a shallow copy of the array
                    answerNew[index].answer = e.target.value;
                    let clonContent = listQuestions[totalIndex].content;
                    clonContent.variants = answerNew;
                    updateQuestionsList(totalIndex, { content: clonContent });
                  }}
                  onKeyDown={(event: KeyboardEvent<HTMLInputElement>) =>
                    event.code === "Enter" && addNewAnswer()
                  }
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <PointsIcon />
                      </InputAdornment>
                    ),
                    endAdornment: (
                      <InputAdornment position="end">
                        <IconButton aria-describedby={id} onClick={handleClick}>
                          <MessageIcon />
                        </IconButton>
                        <Popover
                          id={id}
                          open={isOpen}
                          anchorEl={anchorEl}
                          onClose={handleClose}
                          anchorOrigin={{
                            vertical: "bottom",
                            horizontal: "left",
                          }}
                        >
                          <TextareaAutosize
                            style={{ margin: "10px" }}
                            placeholder="Подсказка для этого ответа"
                            value={variant.hints}
                            onChange={(e) => {
                              const answerNew = Answer.slice(); // Create a shallow copy of the array
                              answerNew[index].hints = e.target.value;
                              let clonContent =
                                listQuestions[totalIndex].content;
                              clonContent.variants = answerNew;
                              updateQuestionsList(totalIndex, {
                                content: clonContent,
                              });
                            }}
                          />
                        </Popover>
                        <IconButton
                          onClick={() => {
                            const answerNew = Answer.slice(); // Create a shallow copy of the array
                            answerNew.splice(index, 1);
                            let clonContent = listQuestions[totalIndex].content;
                            clonContent.variants = answerNew;
                            updateQuestionsList(totalIndex, {
                              content: clonContent,
                            });
                          }}
                        >
                          <DeleteIcon color={theme.palette.grey2.main} />
                        </IconButton>
                      </InputAdornment>
                    ),
                  }}
                  sx={{
                    "& .MuiInputBase-root": {
                      height: "48px",
                      borderRadius: "10px",
                    },
                  }}
                  inputProps={{
                    sx: {
                      fontSize: "18px",
                      lineHeight: "21px",
                      py: 0,
                    },
                  }}
                />
              </FormControl>
            ))}
          </Box>
        )}

        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            gap: "10px",
            marginTop: "10px",
          }}
        >
          <Link
            component="button"
            variant="body2"
            sx={{ color: theme.palette.brightPurple.main }}
            onClick={addNewAnswer}
          >
            Добавьте ответ
          </Link>
          <Typography
            sx={{
              fontWeight: 400,
              fontSize: "18px",
              lineHeight: "21.33px",
              color: theme.palette.grey2.main,
            }}
          >
            или нажмите Enter
          </Typography>
          <EnterIcon />
        </Box>
      </Box>
      <ButtonsOptionsAndPict
        switchState={switchState}
        SSHC={SSHC}
        totalIndex={totalIndex}
      />
      <SwitchAnswerOptions switchState={switchState} totalIndex={totalIndex} />
    </>
  );
}