import {
  Box,
  Typography,
  useTheme,
  useMediaQuery,
  Skeleton,
} from "@mui/material";
import HeaderFull from "@ui_kit/Header/HeaderFull";
import SectionWrapper from "@ui_kit/SectionWrapper";
import { FC, useEffect, useState } from "react";
import { CardAnswer } from "./CardAnswer";
import { PrePaymentModal } from "./PrePaymentModal";
import { FilterModal } from "@ui_kit/Modal/FilterModal/FilterModal";

import { resultApi } from "@api/result";
import { useResultStore } from "@root/results/store";
import { ExportResults, setResults } from "@root/results/actions";

import { quizApi } from "@api/quiz";
import { setQuizes } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuizStore } from "@root/quizes/store";
import { questionApi } from "@api/question";
import { setQuestions } from "@root/questions/actions";
import { useUserStore } from "@root/user";

import CustomPagination from "@ui_kit/CustomPagination";
import SettingResults from "./SettingResults";
import { DateDefinition, parseFilters, TimeDefinition } from "./helper";

const itemsCities = [
  { label: "Муром (1)", value: "option1" },
  { label: "Москва (1)", value: "option2" },
];

const itemsTime = [
  "За всё время",
  "Сегодня",
  "Вчера",
  "Последние 7 дней",
  "Последние 30 дней",
  "Этот месяц",
];
const itemsNews = ["Все заявки", "Новые"];

export const QuizAnswersPage: FC = () => {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  const [filterModalOpen, setFilterModalOpen] = useState<boolean>(false);
  const [page, setPage] = useState(1);
  const [exportContactsModalOpen, setExportContactsModalOpen] =
    useState<boolean>(false);
  const [filterNew, setFilterNew] = useState<string>("Все заявки");
  const [filterDate, setFilterDate] = useState<string>("За всё время");
  const [prePaymentModalOpen, setPrePaymentModalOpen] =
    useState<boolean>(false);
  const { userAccount } = useUserStore();

  const filterNewHC = (value: string) => {
    setFilterNew(value);
  };
  const filterDateHC = (value: string) => {
    setFilterDate(value);
  };

  const quiz = useCurrentQuiz();
  const { editQuizId } = useQuizStore();
  const { results, total_count } = useResultStore();

  console.log("Перерендер компонента ", results);

  const countPagination = Math.ceil(total_count / 10);
  // const {idResultArray, addIdResult, clearIdResultArray} = useObsolescenceIdResult()
  useEffect(() => {
    getData();
  }, [filterNew, filterDate]);

  useEffect(() => {
    if (!userAccount) {
      return;
    }

    if (
      !Object.keys(userAccount.privileges || {}).length ||
      userAccount.privileges?.[""]?.amount === 0
    ) {
      setPrePaymentModalOpen(true);

      return;
    }

    setPrePaymentModalOpen(false);
  }, [userAccount]);

  const getData = async () => {
    if (editQuizId !== null) {
      const quizes = await quizApi.getList();
      setQuizes(quizes);

      const questions = await questionApi.getList({ quiz_id: editQuizId });
      setQuestions(questions);

      const result = await resultApi.getList(
        editQuizId,
        0,
        parseFilters(filterNew, filterDate),
      );
      setResults(result);
    }
  };

  const PaginationHC = async (e, value) => {
    setPage(value);
    const result = await resultApi.getList(
      editQuizId,
      value - 1,
      parseFilters(filterNew, filterDate),
    );
    setResults(result);
  };

  if (quiz === undefined)
    return (
      <Skeleton sx={{ width: "100vw", height: "100vh", transform: "none" }} />
    );

  useEffect(() => {
    return setResults([]);
  }, []);

  return (
    <Box>
      <HeaderFull isRequest={true} sx={{ position: "fixed", zIndex: 9 }} />
      <SectionWrapper
        sx={{ padding: isMobile ? "115px 16px" : "115px 20px 20px" }}
        maxWidth="lg"
      >
        <Typography
          sx={{
            fontSize: "36px",
            fontWeight: "500",
            mb: "50px",

            lineHeight: "normal",
            wordBreak: "break-word",
          }}
        >
          {quiz.name}
        </Typography>

        <Box
          sx={{
            width: "100%",
            display: isTablet ? "flex" : "-moz-initial",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <Box sx={{ display: "flex", alignItems: "center", gap: "8px" }}>
            <Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
              Ответы на квиз
            </Typography>
            <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
              ({total_count})
            </Typography>
          </Box>

          <Box
            sx={{
              mt: "20px",
              mb: "31px",
              gap: "30px",
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              width: isTablet ? "auto" : "100%",
            }}
          >
            <SettingResults
              onclickExport={() =>
                ExportResults(
                  filterNew,
                  filterDate,
                  () => setPrePaymentModalOpen(true),
                  editQuizId,
                )
              }
              onclickUpdate={async () => {
                const result = await resultApi.getList(
                  editQuizId,
                  page - 1,
                  parseFilters(filterNew, filterDate),
                );
                setResults(result);
              }}
              onclickFilterTablet={() => setFilterModalOpen(true)}
              onclickResetFilers={() => {
                setFilterNew("Все заявки");
                setFilterDate("За всё время");
              }}
              filterNewHC={filterNewHC}
              filterDateHC={filterDateHC}
              itemsTime={itemsTime}
              itemsNews={itemsNews}
              filterDate={filterDate}
              filterNew={filterNew}
            />
          </Box>
        </Box>
        <CustomPagination
          countPagination={countPagination}
          page={page}
          onChange={PaginationHC}
        />

        {!isTablet && (
          <Box
            sx={{
              display: "flex",
              width: "100%",
              alignItems: "center",
              mb: "15px",
            }}
          >
            <Typography sx={{ fontSize: "18px", color: "#9A9AAF", mr: "40px" }}>
              № заявки
            </Typography>
            <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
              Дата
            </Typography>
            <Typography
              sx={{ fontSize: "18px", color: "#9A9AAF", ml: "288px" }}
            >
              Контакты
            </Typography>
          </Box>
        )}

        <Box
          sx={{
            display: "flex",
            alignItems: "flex-start",
            flexDirection: isTablet ? "-moz-initial" : "column",
            flexWrap: isTablet ? "wrap" : "nowrap",
            gap: "20px",
          }}
        >
          {results.map((result) => {
            const dataResult = new Date(result.created_at);
            let dayResult = DateDefinition(result.created_at);
            let timeResult = TimeDefinition(result.created_at);
            return (
              <CardAnswer
                name={result.content.name}
                email={result.content.email}
                phone={result.content.phone}
                address={result.content.address}
                isNew={result.new}
                idResult={result.id}
                dayResult={dayResult}
                timeResult={timeResult}
                openPrePaymentModal={() => setPrePaymentModalOpen(true)}
              />
            );
          })}
        </Box>
      </SectionWrapper>

      <FilterModal
        open={filterModalOpen}
        handleClose={() => setFilterModalOpen(false)}
        filterNew={filterNew}
        filterDate={filterDate}
        setFilterNew={filterNewHC}
        setFilterDate={filterDateHC}
        itemsTime={itemsTime}
        itemsNews={itemsNews}
      />
      <PrePaymentModal
        open={prePaymentModalOpen}
        setOpen={setPrePaymentModalOpen}
      />
    </Box>
  );
};