import { Box } from "@mui/material";
import { DataGrid, GridColDef, GridToolbar } from "@mui/x-data-grid";

import { usePromocodeStore } from "@root/stores/promocodes";

import theme from "@root/theme";

const columns: GridColDef[] = [
  { field: "id", headerName: "ID", width: 30, sortable: false },
  {
    field: "name",
    headerName: "Название промокода",
    width: 200,
    sortable: false,
  },
  { field: "endless", headerName: "Бесконечный", width: 120, sortable: false },
  { field: "from", headerName: "От", width: 120, sortable: false },
  { field: "dueTo", headerName: "До", width: 120, sortable: false },
  {
    field: "privileges",
    headerName: "Привилегии",
    width: 210,
    sortable: false,
  },
];

export const PromocodesList = () => {
  const { promocodes } = usePromocodeStore();

  return (
    <Box style={{ width: "80%", marginTop: "55px" }}>
      <Box style={{ height: 400 }}>
        <DataGrid
          checkboxSelection={true}
          rows={promocodes}
          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 },
          }}
          components={{ Toolbar: GridToolbar }}
          onSelectionModelChange={(ids) => console.log("datagrid select")}
        />
      </Box>
    </Box>
  );
};