import { CircularProgress, Typography } from "@mui/material";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";

import { CreatePromocodeForm } from "./CreatePromocodeForm";
import { PromocodesList } from "./PromocodesList";

import { usePromocodes } from "@root/api/promocode/swr";
import theme from "@root/theme";

export const PromocodeManagement = () => {
    const { data, error, isLoading } = usePromocodes();

    if (error) return <Typography>Ошибка загрузки промокодов</Typography>;
    if (isLoading) return <CircularProgress />;
    if (!data) return null;

    return (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
            <Typography
                variant="subtitle1"
                sx={{
                    width: "90%",
                    height: "60px",
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: "center",
                    textTransform: "uppercase",
                    color: theme.palette.secondary.main,
                }}
            >
                Создание промокода
            </Typography>
            <CreatePromocodeForm />
            <PromocodesList promocodes={data} />
        </LocalizationProvider>
    );
};