import {
  Typography,
  Box,
  Button,
  SxProps,
  Theme,
  useTheme,
  useMediaQuery,
} from "@mui/material";
import ComplexNavText from "./ComplexNavText";
import QuizCard from "./QuizCard";
import SectionWrapper from "@ui_kit/SectionWrapper";
import React from "react";
import { quizStore } from "@root/quizes";
import FirstQuiz from "./FirstQuiz";
import { useNavigate } from "react-router-dom";
import { createQuiz } from "@root/quizesV2";
interface Props {
  outerContainerSx?: SxProps<Theme>;
  children?: React.ReactNode;
}

export default function MyQuizzesFull({
  outerContainerSx: sx,
  children,
}: Props) {
  const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
  const navigate = useNavigate();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(500));

  return (
    <>
      {Object.keys(listQuizes).length === 0 ? (
        <FirstQuiz />
      ) : (
        <SectionWrapper maxWidth="lg">
          <ComplexNavText text1="Кабинет квизов" />
          <Box
            sx={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              mt: "20px",
              mb: "30px",
            }}
          >
            <Typography variant="h4">Мои квизы</Typography>
            <Button
              variant="contained"
              sx={{
                padding: isMobile ? "10px" : "10px 47px",
                minWidth: "44px",
              }}
              onClick={() => createQuiz(navigate)}
            >
              {isMobile ? "+" : "Создать +"}
            </Button>
          </Box>
          <Box
            sx={{
              py: "10px",
              display: "flex",
              flexWrap: "wrap",
              gap: "40px",
              mb: "60px",
            }}
          >
            {Object.values(listQuizes).map(({ id, name }) => (
              <QuizCard
                key={id}
                name={name}
                openCount={0}
                applicationCount={0}
                conversionPercent={0}
                onClickDelete={() => {
                  removeQuiz(id);
                }}
                onClickEdit={() => navigate(`/setting/${id}`)}
              />
            ))}
          </Box>
          {children}
        </SectionWrapper>
      )}
    </>
  );
}