import {Typography, Box, Button, SxProps, Theme} 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";
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()

    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: "10px 47px"}}
                                onClick={() => {
                                    navigate(`/create-quize/${createBlank()}`);
                                }}
                            >Создать +</Button>
                        </Box>
                        <Box
                            sx={{
                                py: "10px",
                                display: "flex",
                                flexWrap: "wrap",
                                gap: "40px",
                                mb: "60px",
                            }}
                        >
                            {Object.values(listQuizes).map((e, i) =>(
                                    <QuizCard name={e.name}
                                              openCount={0}
                                              applicationCount={0}
                                              conversionPercent={0}
                                              onClickDelete={() => {
                                                  removeQuiz(e.id)
                                              }}
                                              onClickEdit={() =>
                                                  navigate(`/create-quize/${e.id}`)
                                              }
                                    />
                                )
                            )}

                        </Box>
                        {children}
                    </SectionWrapper>

      }
      </>
    )
}