import SettingResults from "./SettingResults";
import { ExportResults, setResults } from "@root/results/actions";
import { resultApi } from "@api/result";
import { parseFilters } from "./helper";
import { Box, Typography } from "@mui/material";
import { FC } from "react";
import { Quiz } from "@model/quiz/quiz";

interface QuizSettingsMenuProps {
  quiz: Quiz;
  total_count: number;
  isTablet: boolean;
  filterNew: string;
  filterDate: string;
  setPrePaymentModalOpen: (value: boolean) => void;
  editQuizId: number | null;
  page: number;
  setFilterModalOpen: (value: boolean) => void;
  setFilterNew: (value: string) => void;
  setFilterDate: (value: string) => void;
  filterNewHC: (value: string) => void;
  filterDateHC: (value: string) => void;
  itemsTime: string[];
  itemsNews: string[];
}

export const QuizSettingsMenu: FC<QuizSettingsMenuProps> = ({
  quiz,
  total_count,
  isTablet,
  filterNew,
  filterDate,
  setPrePaymentModalOpen,
  editQuizId,
  page,
  setFilterModalOpen,
  setFilterNew,
  setFilterDate,
  filterNewHC,
  filterDateHC,
  itemsTime,
  itemsNews,
}) => {
  return (
    <>
      <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={() => {
              if (editQuizId !== null) {
                ExportResults(
                  filterNew,
                  filterDate,
                  () => setPrePaymentModalOpen(true),
                  editQuizId,
                );
              } else {
                console.error("editQuizId is null");
              }
            }}
            onclickUpdate={async () => {
              if (editQuizId !== null) {
                const [result, resultError] = await resultApi.getList(
                  editQuizId,
                  page - 1,
                  parseFilters(filterNew, filterDate),
                );

                if (resultError || !result) {
                  console.error(resultError);

                  return;
                }

                setResults(result);
              } else {
                console.error("editQuizId is null");
              }
            }}
            onclickFilterTablet={() => setFilterModalOpen(true)}
            onclickResetFilers={() => {
              setFilterNew("Все заявки");
              setFilterDate("За всё время");
            }}
            filterNewHC={filterNewHC}
            filterDateHC={filterDateHC}
            itemsTime={itemsTime}
            itemsNews={itemsNews}
            filterDate={filterDate}
            filterNew={filterNew}
          />
        </Box>
      </Box>
    </>
  );
};