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

import type { GridColDef } from "@mui/x-data-grid";

const COLUMNS: GridColDef[] = [
  {
    field: "date",
    headerName: "Дата",
    minWidth: 130,
    maxWidth: 200,
    flex: 1,
    sortable: false,
  },
  {
    field: "time",
    headerName: "Время",
    minWidth: 90,
    maxWidth: 180,
    flex: 1,
    sortable: false,
  },
  {
    field: "product",
    headerName: "Товар",
    minWidth: 200,
    maxWidth: 280,
    flex: 1,
    sortable: false,
  },
  {
    field: "amount",
    headerName: "Кол-во",
    minWidth: 70,
    maxWidth: 70,
    flex: 1,
    sortable: false,
  },
];

const ROWS = [
  {
    id: "row_1",
    date: "19.02.2023",
    time: "17:01",
    product: "Шаблонизатор",
    amount: "1 шт.",
  },
  {
    id: "row_2",
    date: "28.02.2023",
    time: "10:43",
    product: "Шаблонизатор",
    amount: "1 шт.",
  },
  {
    id: "row_3",
    date: "04.03.2023",
    time: "21:09",
    product: "Сокращатель ссылок",
    amount: "2 шт.",
  },
];

export const PurchaseTab = () => (
  <Box
    sx={{
      height: "100%",
      padding: "0 25px",
      "&:before": {
        content: '""',
        height: "50px",
        width: "100%",
        position: "absolute",
        left: "0",
        top: "0",
        background: "#F2F3F7",
      },
    }}
  >
    <DataGrid
      rows={ROWS}
      columns={COLUMNS}
      pageSize={5}
      rowsPerPageOptions={[5]}
      hideFooter
      disableColumnMenu
      disableSelectionOnClick
      rowHeight={50}
      headerHeight={50}
      experimentalFeatures={{ newEditingApi: true }}
      sx={{
        borderRadius: "0",
        border: "none",
        "& .MuiDataGrid-columnHeaders": {
          background: "#F2F3F7",
          borderBottom: "none",
        },
        "& .MuiDataGrid-main .MuiDataGrid-columnHeader": {
          outline: "none",
        },
        "& .MuiDataGrid-columnHeaderTitle": {
          fontWeight: "bold",
          userSelect: "none",
        },
        "& .MuiDataGrid-virtualScrollerRenderZone": {
          width: "100%",
        },
        "& .MuiDataGrid-iconSeparator": { display: "none" },
        "& .MuiDataGrid-main .MuiDataGrid-cell": {
          outline: "none",
          border: "none",
          justifyContent: "flex-start",
        },
        "& .MuiDataGrid-row": {
          width: "100%",
          "&:hover": {
            background: "#F2F3F7",
          },
        },
      }}
    />
  </Box>
);