adminFront/src/pages/dashboard/Content/PromocodeManagement/StatisticsModal.tsx

import {useEffect, useState} from "react";
import {
  Box,
  Button,
  Typography,
  Modal,
  TextField,
  useTheme,
  useMediaQuery,
} from "@mui/material";
import { DataGrid, GridLoadingOverlay, GridToolbar } from "@mui/x-data-grid";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";

import { fadeIn } from "@root/utils/style/keyframes";

import type { GridColDef } from "@mui/x-data-grid";
import type { PromocodeStatistics } from "@root/model/promocodes";
import moment from "moment";
import {promocodeApi} from "@root/api/promocode/requests";

type StatisticsModalProps = {
  id: string;
  to: number;
  from: number;
  setId: (id: string) => void;
  setTo: (date: number) => void;
  setFrom: (date: number) => void;
  // promocodeStatistics: PromocodeStatistics[] | null | undefined;
 // promocodeStatistics: any;
};

const COLUMNS: GridColDef<PromocodeStatistics, string>[] = [
  {
    field: "link",
    headerName: "Ссылка",
    width: 320,
    sortable: false,
    valueGetter: ({ row }) => row.link,
  },
  {
    field: "useCount",
    headerName: "Использований",
    width: 120,
    sortable: false,
    valueGetter: ({ row }) => String(row.useCount),
  },
  {
    field: "purchasesCount",
    headerName: "Покупок",
    width: 70,
    sortable: false,
    valueGetter: ({ row }) => String(row.purchasesCount),
  },
];

export const StatisticsModal = ({
  id,
  setId,
  setFrom,
  from,
  to,
  setTo,
  //promocodeStatistics,
}: StatisticsModalProps) => {
  const [startDate, setStartDate] = useState<Date>(new Date());
  const [endDate, setEndDate] = useState<Date>(new Date());
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(550));
    const [general, setGeneral] = useState({});
    // const formatTo = to === null ? 0 : moment(to).unix()
    // const formatFrom = from === null ? 0 : moment(from).unix()
    console.log(startDate)
    // useEffect(() => {
    //     (async () => {
    //         const gottenGeneral = await promocodeStatistics(id, startDate, endDate)
    //         setGeneral(gottenGeneral[0])
    //     })()
    // }, [to, from]);
  return (
    <Modal
      open={Boolean(id)}
      onClose={() => {
          setId("")
          setStartDate(new Date())
          setEndDate(new Date())
      }}
      sx={{ "& > .MuiBox-root": { outline: "none" } }}
    >
      <Box
        sx={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          width: "95%",
          maxWidth: "600px",
          background: "#1F2126",
          border: "2px solid gray",
          borderRadius: "6px",
          boxShadow: 24,
          p: 4,
        }}
      >
        <Box
          sx={{
            display: "flex",
            gap: "30px",
            justifyContent: "center",
            alignItems: "center",
            flexDirection: isMobile ? "column" : "row",
          }}
        >
          <Box
            sx={{
              display: "flex",
              gap: "30px",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Button
              sx={{ maxWidth: "100px" }}
              // onClick={() => }
            >
              Создать короткую ссылку
            </Button>
            <Button
              sx={{ maxWidth: "100px" }}
              onClick={async () =>{
                  const promocodeStatistics = promocodeApi.getPromocodeStatistics(id, moment(startDate).unix(), moment(endDate).unix())
                  setGeneral(promocodeStatistics)
              } }
            >
              Обновить статистику
            </Button>
          </Box>
          <Box sx={{ minWidth: "200px" }}>
            <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
              <Typography sx={{ minWidth: "20px", color: "#FFFFFF" }}>
                от
              </Typography>
              <DatePicker
                inputFormat="DD/MM/YYYY"
                value={startDate}
                onChange={(date) => date && setStartDate(date)}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    sx={{ background: "#1F2126", borderRadius: "5px" }}
                  />
                )}
                InputProps={{
                  sx: {
                    height: "40px",
                    color: theme.palette.secondary.main,
                    border: "1px solid",
                    borderColor: theme.palette.secondary.main,
                    "& .MuiSvgIcon-root": {
                      color: theme.palette.secondary.main,
                    },
                  },
                }}
              />
            </Box>
            <Box
              sx={{
                display: "flex",
                alignItems: "center",
                gap: "10px",
                marginTop: "10px",
              }}
            >
              <Typography sx={{ minWidth: "20px", color: "#FFFFFF" }}>
                до
              </Typography>
              <DatePicker
                inputFormat="DD/MM/YYYY"
                value={endDate}
                onChange={(date) => date && setEndDate(date)}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    sx={{ background: "#1F2126", borderRadius: "5px" }}
                  />
                )}
                InputProps={{
                  sx: {
                    height: "40px",
                    color: theme.palette.secondary.main,
                    border: "1px solid",
                    borderColor: theme.palette.secondary.main,
                    "& .MuiSvgIcon-root": {
                      color: theme.palette.secondary.main,
                    },
                  },
                }}
              />
            </Box>
          </Box>
        </Box>
        <DataGrid
          disableSelectionOnClick={true}
          rows={[]}
          columns={COLUMNS}
          sx={{
            marginTop: "30px",
            background: "#1F2126",
            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,
          }}
          rowsPerPageOptions={[10, 25, 50, 100]}
          autoHeight
        />
      </Box>
    </Modal>
  );
};