import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
import {
  Box,
  Button,
  IconButton,
  Link,
  Modal,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { FC, useState } from "react";
import { ContactIcon } from "./icons/ContactIcon";
import { MessageIcon } from "./icons/MessageIcon";
import { PhoneIcon } from "./icons/PhoneIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";

import homeImg from "./images/home.png";
import videoFrame from "./images/videoFrame.png";
import { EyeIcon } from "./icons/EyeIcon";
import { deleteResult, obsolescenceResult } from "@root/results/actions";
import { resultApi } from "@api/result";
import { useQuizStore } from "@root/quizes/store";
import { useQuestionsStore } from "@root/questions/store";
import AddressIcon from "@icons/ContactFormIcon/AddressIcon";

import type { AxiosError } from "axios";
import { DeleteModal } from "./DeleteModal";

interface Props {
  isNew: boolean;
  idResult: string;
  onClick: () => void;
  dayResult: string;
  timeResult: string;
  name?: string;
  phone?: string;
  email?: string;
  address?: string;
  onLossNew?: (id: string) => void;
  openPrePaymentModal: () => void;
}

export const CardAnswer = ({
  name,
  phone,
  email,
  address,
  isNew = true,
  idResult,
  timeResult,
  dayResult,
  onLossNew,
  openPrePaymentModal,
}: Props) => {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [openDelete, setOpenDelete] = useState<boolean>(false);
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const [resultsAnswer, setResultsAnswer] = useState([]);
  const [resultQuiz, setResultQuiz] = useState([]);
  const [questionsResultState, setQuestionsResultState] = useState([]);
  const { editQuizId } = useQuizStore();
  const { questions } = useQuestionsStore();

  const openResults = async () => {
    setIsOpen(!isOpen);
    if (!isOpen) {
      try {
        let resAnswer = await resultApi.getAnswerList(Number(idResult));

        let resAnswerOnly = resAnswer.filter((res) => res.Result !== true);
        let resQuiz = resAnswer.filter((res) => res.Result === true);
        setResultQuiz(resQuiz);
        setResultsAnswer(resAnswerOnly);
        let idResults = resQuiz[0].question_id;
        let questionsResult = questions.filter(
          (q) => q.backendId === idResults,
        );
        setQuestionsResultState(questionsResult);
        console.log("тут хранятся ответы", resAnswerOnly);
      } catch (nativeError) {
        const error = nativeError as AxiosError;

        if (error.response?.statusText === "Payment Required") {
          openPrePaymentModal();
        }
      }
    }
  };

  return (
    <Box
      onClick={() => {
        obsolescenceResult(idResult, editQuizId);
        openResults();
      }}
      sx={{
        borderRadius: "12px",
        maxWidth: isTablet ? "450px" : "auto",
        width: "100%",
        boxShadow:
          "0px 2.767px 8.551px 0px rgba(210, 208, 225, 0.07), 0px 6.65px 20.549px 0px rgba(210, 208, 225, 0.10), 0px 12.522px 38.692px 0px rgba(210, 208, 225, 0.12), 0px 22.336px 69.019px 0px rgba(210, 208, 225, 0.14), 0px 41.778px 129.093px 0px rgba(210, 208, 225, 0.17), 0px 100px 309px 0px rgba(210, 208, 225, 0.24)",
      }}
    >
      <Box
        sx={{
          width: "100%",
          display: "flex",
          justifyContent: "space-between",
          flexDirection: isTablet ? "column" : "-moz-initial",
        }}
      >
        <Box
          sx={{
            flexDirection: isTablet ? "column" : "-moz-initial",
            cursor: "pointer",
            p: "20px",
            borderRadius: isTablet
              ? "12px 12px 0 0"
              : isOpen
                ? "12px 0 0 0"
                : "12px 0 0 12px",
            display: "flex",
            alignItems: "flex-start",
            background: "#FFF",
            width: "100%",
          }}
        >
          <Box
            sx={{
              width: isTablet ? "100%" : "auto",
              display: "flex",
              alignItems: "flex-start",
              flexDirection: isTablet ? "row-reverse" : "-moz-initial",
              justifyContent: isTablet ? "space-between" : "-moz-initial",
              pb: isTablet ? "20px" : "0",
              mb: isTablet ? "20px" : "0",
              borderBottom: isTablet
                ? "1px solid rgba(154, 154, 175, 0.50)"
                : "0",
            }}
          >
            <Box sx={{ display: "flex", alignItems: "center", gap: "6px" }}>
              <Box
                sx={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  width: "30px",
                  height: "30px",
                  borderRadius: "50%",
                  background: "#EEE4FC",
                  color: "#7E2AEA",
                }}
              >
                {idResult}
              </Box>
              <IconButton onClick={openResults}>
                <ArrowDownIcon
                  style={{
                    transform: isOpen ? "rotate(180deg)" : "rotate(360deg)",
                  }}
                  fontSize="10px"
                />
              </IconButton>
            </Box>

            <Typography
              sx={{
                ml: isTablet ? "0" : "50px",
                mr: isTablet ? "0" : "188px",
                fontSize: "18px",
                color: "#7E2AEA",
                maxWidth: "143px",
                width: "100%",
              }}
            >
              {dayResult} в {timeResult}
            </Typography>
          </Box>

          <Box sx={{ display: "flex", flexDirection: "column", gap: "10px" }}>
            {name && (
              <Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
                <ContactIcon />
                <Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
                  {name}
                </Typography>
              </Box>
            )}
            {email && (
              <Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
                <MessageIcon />
                <Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
                  {email}
                </Typography>
              </Box>
            )}
            {phone && (
              <Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
                <PhoneIcon />
                <Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
                  {phone}
                </Typography>
              </Box>
            )}
            {address && (
              <Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
                <AddressIcon color={"#9A9AAF"} />
                <Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
                  {address}
                </Typography>
              </Box>
            )}
          </Box>

          {!isTablet && isNew && (
            <Typography
              sx={{
                ml: "auto",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                background: "#FB5607",
                borderRadius: "8px",
                width: "77px",
                height: "36px",
                color: "white",
              }}
            >
              Новая
            </Typography>
          )}
        </Box>

        <Box
          sx={{
            borderRadius: "8px",
            p: isTablet ? "20px" : "0",
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            justifyContent: isTablet ? "space-between" : "center",
            width: isTablet ? "100%" : "100px",
            background: "#F2F3F7",
          }}
        >
          {isTablet && isNew ? (
            <>
              <Typography
                sx={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  background: "#FB5607",
                  borderRadius: "8px",
                  width: "77px",
                  height: "36px",
                  color: "white",
                }}
              >
                Новая
              </Typography>
              <Box sx={{ display: "flex", alignItems: "center" }}>
                <IconButton onClick={() => setOpenDelete(true)}>
                  <DeleteIcon color="#4D4D4D" fontSize="34px" />
                </IconButton>
              </Box>
            </>
          ) : (
            <IconButton onClick={() => setOpenDelete(true)}>
              <DeleteIcon color="#4D4D4D" fontSize="34px" />
            </IconButton>
          )}
          <DeleteModal
            openDelete={openDelete}
            handleClose={() => setOpenDelete(false)}
            onClick={() => {
              deleteResult(Number(idResult));
              setOpenDelete(false);
            }}
          />
        </Box>
      </Box>

      {isOpen && (
        <Box
          sx={{
            borderRadius: "12px",
            maxWidth: isTablet ? "450px" : "auto",
            width: "100%",
            boxShadow:
              "0px 2.767px 8.551px 0px rgba(210, 208, 225, 0.07), 0px 6.65px 20.549px 0px rgba(210, 208, 225, 0.10), 0px 12.522px 38.692px 0px rgba(210, 208, 225, 0.12), 0px 22.336px 69.019px 0px rgba(210, 208, 225, 0.14), 0px 41.778px 129.093px 0px rgba(210, 208, 225, 0.17), 0px 100px 309px 0px rgba(210, 208, 225, 0.24)",
          }}
        >
          <Box
            sx={{
              p: "20px",
              borderTop: "1px solid #F1F2F6",
              background: "#FFF",
              borderRadius: "0 0 12px 12px",
            }}
          >
            <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
              Ответы
            </Typography>
          </Box>

          <Box
            sx={{
              display: "flex",
              gap: isTablet ? "0" : "149px",
              p: "20px",
              flexDirection: isTablet ? "column" : "-moz-initial",
            }}
          >
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                gap: "15px",
                mt: "20px",
              }}
            >
              {resultsAnswer.map((answer, id) => {
                let titleQuestion;
                let typeOuestion;
                let typeQuestionFile;
                let quest = questions; //массив с вопросами
                let i;
                let idAnswer = answer.question_id; //айди вопроса у ответа
                for (i in quest) {
                  if (quest[i].backendId === idAnswer) {
                    titleQuestion = quest[i].title;
                    typeOuestion = quest[i].type;
                    typeQuestionFile = quest[i].content.type;
                  }
                }
                return (
                  <Box
                    sx={{ display: "flex", alignItems: "center", gap: "13px" }}
                  >
                    <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
                      {id + 1}. {titleQuestion}.
                    </Typography>
                    {typeOuestion === "file" && (
                      <Link
                        download
                        href={answer.content}
                        style={{
                          color: "#7E2AEA",
                          display: "flex",
                          gap: "10px",
                        }}
                      >
                        {typeQuestionFile === "video" && (
                          <video
                            src={answer.content}
                            width={40}
                            height={40}
                          ></video>
                        )}
                        {typeQuestionFile === "picture" && (
                          <img src={answer.content} width={40} height={40} />
                        )}
                        клик для скачивания
                      </Link>
                    )}
                    {(typeOuestion === "images" ||
                      typeOuestion === "varimg") && (
                      <>
                        <img
                          width={40}
                          height={40}
                          src={
                            answer.content
                              .split("<")[1]
                              .split('src="')[1]
                              .split('"/>')[0]
                          }
                        />

                        <Typography sx={{ fontSize: "18px" }}>
                          {answer.content.split("<")[0]}
                        </Typography>
                      </>
                    )}
                    {!(
                      typeOuestion === "file" ||
                      typeOuestion === "images" ||
                      typeOuestion === "varimg"
                    ) && (
                      <Typography sx={{ fontSize: "18px" }}>
                        {answer.content}
                      </Typography>
                    )}
                  </Box>
                );
              })}
            </Box>
          </Box>

          <Box
            sx={{
              p: "20px",
              borderTop: "1px solid #F1F2F6",
              background: "#FFF",
              borderRadius: "0 0 12px 12px",
            }}
          >
            <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
              Результаты
            </Typography>
          </Box>
          {questionsResultState.map((res) => {
            console.log(questionsResultState, "что за результат тут");
            return (
              <Box
                sx={{
                  display: "flex",
                  flexDirection: "column",
                  gap: "15px",
                  p: "20px",
                }}
              >
                <Typography
                  sx={{
                    fontSize: "18px",
                    fontWeight: "500",
                    wordBreak: "break-word",
                  }}
                >
                  {res.description}
                </Typography>
                <Typography sx={{ fontSize: "18px", wordBreak: "break-word" }}>
                  {res.title}
                </Typography>
                {res.content.useImage &&
                  res.content.back &&
                  res.content.back !== " " && (
                    <img
                      src={res.content.back}
                      style={{ width: "40px", height: "40px" }}
                      alt={""}
                    />
                  )}
                {!res.content.useImage &&
                  res.content.back &&
                  res.content.back !== " " && (
                    <video
                      src={res.content.back}
                      style={{ width: "40px", height: "40px" }}
                    ></video>
                  )}
              </Box>
            );
          })}
        </Box>
      )}
    </Box>
  );
};