import { Box, Button, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
import { createQuiz } from "@root/quizes/actions";
import { useQuizes } from "@root/quizes/hooks";
import SectionWrapper from "@ui_kit/SectionWrapper";
import React from "react";
import { useNavigate } from "react-router-dom";
import { resetEditConfig } from "@root/quizes/actions";
import FirstQuiz from "./FirstQuiz";
import QuizCard from "./QuizCard";

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

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

  return (
    <>
      {quizes.length === 0 ? (
        <FirstQuiz />
      ) : (
        <SectionWrapper maxWidth="lg">
          <Box
            sx={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              mt: "20px",
              mb: "30px",
            }}
          >
            <Typography variant="h4">Мои quiz</Typography>
            <Button
              variant="contained"
              sx={{
                padding: isMobile ? "10px" : "10px 47px",
                minWidth: "44px",
              }}
              onClick={() => {
                resetEditConfig();
                createQuiz(navigate)
              }}
              data-cy="create-quiz"
            >
              {isMobile ? "+" : "Создать +"}
            </Button>
          </Box>
          <Box
            sx={{
              py: "10px",
              display: "flex",
              flexWrap: "wrap",
              gap: "40px",
              mb: "60px",
            }}
          >
            {quizes.map((quiz) => (
              <QuizCard key={quiz.id} quiz={quiz} openCount={0} applicationCount={0} conversionPercent={0} />
            ))}
          </Box>
          {children}
        </SectionWrapper>
      )}
    </>
  );
}