import { quizApi } from "@api/quiz";
import { devlog } from "@frontend/kitui";
import {
    Box,
    Button,
    SxProps,
    Theme,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import SectionWrapper from "@ui_kit/SectionWrapper";
import { isAxiosError } from "axios";
import { enqueueSnackbar } from "notistack";
import React from "react";
import { useNavigate } from "react-router-dom";
import useSWR from "swr";
import ComplexNavText from "./ComplexNavText";
import FirstQuiz from "./FirstQuiz";
import QuizCard from "./QuizCard";
import { setQuizes, createQuiz } from "@root/quizes/actions";
import { useQuizArray } from "@root/quizes/hooks";


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

export default function MyQuizzesFull({
    outerContainerSx: sx,
    children,
}: Props) {
    useSWR("quizes", () => quizApi.getList(), {
        onSuccess: setQuizes,
        onError: error => {
            const message = isAxiosError<string>(error) ? (error.response?.data ?? "") : "";

            devlog("Error getting quiz list", error);
            enqueueSnackbar(`Не удалось получить квизы. ${message}`);
        },
    });
    const quizArray = useQuizArray();
    const navigate = useNavigate();
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(500));

    return (
        <>
            {quizArray.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",
                        }}
                    >
                        {quizArray.map(quiz => (
                            <QuizCard
                                key={quiz.id}
                                quiz={quiz}
                                openCount={0}
                                applicationCount={0}
                                conversionPercent={0}
                            />
                        ))}
                    </Box>
                    {children}
                </SectionWrapper>
            )}
        </>
    );
}