import {
  Box,
  Skeleton,
  SxProps,
  Theme,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import {
  copyQuiz,
  updateQuiz,
} from "@root/quizes/actions";
import { mutate } from "swr";
import { useQuizes } from "@root/quizes/hooks";
import SectionWrapper from "@ui_kit/SectionWrapper";
import React from "react";
import QuizCard from "./QuizCard";
import HeaderFull from "@ui_kit/Header/HeaderFull";
import QuizgenegationName from "@utils/quizgenegationName";
import AvailablePrivilege from "./AvailablePrivilege";

import AvailablePrivilegeDummy from "@/components/Dummys/AvailablePrivilegeDummy";
import QuizCardDummy from "@/components/Dummys/QuizCardDummy";
import CreateButtons from "@/pages/createQuize/CreateButtons";

interface Props {
  outerContainerSx?: SxProps<Theme>;
  children?: React.ReactNode;
}

export default function MyQuizzesFull({
  outerContainerSx: sx,
  children,
}: Props) {
  const { quizes, isLoading } = useQuizes();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(500));

  const onClickCopy = (value: string) => {
    copyQuiz(value);
    mutate("quizes");
  };

  return (
    <>
      <HeaderFull isRequest={false} />
        <SectionWrapper
          maxWidth="lg"
          sx={{ padding: isMobile ? "0 16px" : "20px" }}
        >
          <Box
            sx={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              mt: "20px",
              mb: "30px",
            }}
          >
            {isLoading ? <Skeleton variant="text" sx={{ fontSize: "24px", width: "300px", height: "50px" }} /> :
                <Typography variant="h4">{quizes.length === 0 ? "Создайте свой первый quiz" : "Мои quiz"}</Typography>
            }
            {quizes.length !== 0 &&
                <CreateButtons mt={"20px"}/>
            }
          </Box>
          <Box
            sx={{
              py: "10px",
              display: "flex",
              flexWrap: "wrap",
              gap: "40px",
              mb: "60px",
              width: isMobile ? "100%" : undefined,
            }}
          >
            {isLoading ?
                <>
                  <AvailablePrivilegeDummy/>
                  <QuizCardDummy/>
                  <QuizCardDummy/>
                  <QuizCardDummy/>
                </>
                 :
                <>
                  <AvailablePrivilege />
                  {quizes.length === 0 &&
                  <CreateButtons mt={"0px"}/>}
                  {quizes.map((quiz) => {
                    if (quiz.name.length === 0 || quiz.name === " ") {
                      updateQuiz(quiz.id, (quiz) => {
                        quiz.name = QuizgenegationName({ quiz });
                      });
                    }

                    return (
                        <QuizCard
                            key={quiz.id}
                            quiz={quiz}
                            openCount={quiz.session_count}
                            applicationCount={quiz.passed_count}
                            conversionPercent={
                              quiz.session_count
                                  ? parseFloat(
                                      (
                                          (quiz.passed_count / quiz.session_count) *
                                          100
                                      ).toFixed(2),
                                  )
                                  : 0
                            }
                            onClickCopy={onClickCopy}
                        />
                    );
                  })}
                </>}
          </Box>
          {children}
        </SectionWrapper>
    </>
  );
}
