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

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

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

import type { GridColDef } from "@mui/x-data-grid";
import type { PromocodeStatistics } from "@root/model/promocodes";

type StatisticsModalProps = {
  id: string;
  setId: (id: string) => void;
  promocodeStatistics: PromocodeStatistics[] | null | undefined;
};

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,
  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));

  return (
    <Modal
      open={Boolean(id)}
      onClose={() => setId("")}
      sx={{ "& > .MuiBox-root": { outline: "none" } }}
    >
      <Box
        sx={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          width: "95%",
          maxWidth: "600px",
          bgcolor: "background.paper",
          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={() => }
            >
              Обновить статистику
            </Button>
          </Box>
          <Box sx={{ minWidth: "200px" }}>
            <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
              <Typography sx={{ minWidth: "20px" }}>от</Typography>
              <DesktopDatePicker
                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" }}>до</Typography>
              <DesktopDatePicker
                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={promocodeStatistics ?? []}
          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>
  );
};