import { useState } from "react";
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 { CreatePromocodeForm } from "./CreatePromocodeForm";
import { usePromocodeGridColDef } from "./usePromocodeGridColDef";
import { StatisticsModal } from "./StatisticsModal";

export const PromocodeManagement = () => {
  const theme = useTheme();
  const [showStatisticsModalId, setShowStatisticsModalId] =
    useState<string>("");
  const [page, setPage] = useState<number>(0);
  const [to, setTo] = useState(0);
  const [from, setFrom] = useState(0);
  const [pageSize, setPageSize] = useState<number>(10);
  const {
    data,
    error,
    isValidating,
    promocodesCount,
    //promocodeStatistics,
    deletePromocode,
    createPromocode,
  } = usePromocodes(page, pageSize, showStatisticsModalId, to, from);
  const columns = usePromocodeGridColDef(
    setShowStatisticsModalId,
    deletePromocode
  );
  console.log(showStatisticsModalId)
  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>
      <StatisticsModal
        id={showStatisticsModalId}
        setId={setShowStatisticsModalId}
        //promocodeStatistics={promocodeStatistics}
        to={to}
        setTo={setTo}
        from={from}
        setFrom={setFrom}
      />
    </LocalizationProvider>
  );
};