import { Box, Typography, useTheme } from "@mui/material";
import { DataGrid, GridLoadingOverlay, GridToolbar } from "@mui/x-data-grid";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { usePromocodes } from "@root/api/promocode/swr";
import { fadeIn } from "@root/utils/style/keyframes";
import { useState } from "react";
import { CreatePromocodeForm } from "./CreatePromocodeForm";
import { usePromocodeGridColDef } from "./usePromocodeGridColDef";


export const PromocodeManagement = () => {
    const theme = useTheme();
    const [page, setPage] = useState<number>(0);
    const [pageSize, setPageSize] = useState<number>(10);
    const { data, error, isValidating, promocodesCount, deletePromocode, createPromocode } = usePromocodes(page, pageSize);
    const columns = usePromocodeGridColDef(deletePromocode);

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

    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 createPromocode={createPromocode} />
            <Box style={{ width: "80%", marginTop: "55px" }}>
                <DataGrid
                    disableSelectionOnClick={true}
                    rows={data?.items ?? []}
                    columns={columns}
                    sx={{
                        color: theme.palette.secondary.main,
                        "& .MuiDataGrid-iconSeparator": { display: "none" },
                        "& .css-levciy-MuiTablePagination-displayedRows": {
                            color: theme.palette.secondary.main,
                        },
                        "& .MuiSvgIcon-root": { color: theme.palette.secondary.main },
                        "& .MuiTablePagination-selectLabel": {
                            color: theme.palette.secondary.main,
                        },
                        "& .MuiInputBase-root": { color: theme.palette.secondary.main },
                        "& .MuiButton-text": { color: theme.palette.secondary.main },
                        "& .MuiDataGrid-overlay": {
                            backgroundColor: "rgba(255, 255, 255, 0.1)",
                            animation: `${fadeIn} 0.5s ease-out`,
                        },
                    }}
                    components={{
                        Toolbar: GridToolbar,
                        LoadingOverlay: GridLoadingOverlay,
                    }}
                    loading={isValidating}
                    paginationMode="server"
                    page={page}
                    onPageChange={setPage}
                    rowCount={promocodesCount}
                    pageSize={pageSize}
                    onPageSizeChange={setPageSize}
                    rowsPerPageOptions={[10, 25, 50, 100]}
                    autoHeight
                />
            </Box>
        </LocalizationProvider>
    );
};