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 "../QuestionPageCard";
import { useParams } from "react-router-dom";
import { 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";

interface Props {
  totalIndex: number;
}

export default function AnswerOptions({ totalIndex }: Props) {
  const params = Number(useParams().quizId);

  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 [openBranch, setOpenBranch] = useState(false);
  // const handleOpenBranch = () => setOpenBranch(true);
  // const handleCloseBranch = () => setOpenBranch(false);

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

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

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;
  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((answer: string, index: number) => (
              <FormControl fullWidth variant="standard" sx={{ p: "0 0 20px 0" }}>
                <TextField
                  value={Answer[index].answer}
                  fullWidth
                  placeholder={"Добавьте ответ"}
                  onChange={(e) => {
                    const answerNew = Answer;
                    answerNew[index].answer = e.target.value;
                    let clonContent = listQuestions[totalIndex].content;
                    clonContent.variants = answerNew;
                    updateQuestionsList(totalIndex, { content: clonContent });
                  }}
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <PointsIcon />
                      </InputAdornment>
                    ),
                    endAdornment: (
                      <InputAdornment position="end">
                        <IconButton aria-describedby={id} onClick={handleClick}>
                          <MessageIcon />
                        </IconButton>
                        <Popover
                          id={id}
                          open={open}
                          anchorEl={anchorEl}
                          onClose={handleClose}
                          anchorOrigin={{
                            vertical: "bottom",
                            horizontal: "left",
                          }}
                        >
                          <TextareaAutosize
                            style={{ margin: "10px" }}
                            placeholder="Подсказка для этого ответа"
                            value={Answer[index].hints}
                            onChange={(e) => {
                              const answerNew = Answer;
                              answerNew[index].hints = e.target.value;
                              let clonContent = listQuestions[totalIndex].content;
                              clonContent.variants = answerNew;
                              updateQuestionsList(totalIndex, { content: clonContent });
                            }}
                          />
                        </Popover>
                        <IconButton
                          onClick={() => {
                            const answerNew = Answer;
                            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: {
                      borderRadius: "10px",
                      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={() => {
              const answerNew = Answer;
              answerNew.push({ answer: "" });
              let clonContent = listQuestions[totalIndex].content;
              clonContent.variants = answerNew;
              updateQuestionsList(totalIndex, { content: clonContent });
            }}
          >
            Добавьте ответ
          </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} />
    </>
  );
}