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

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

const COLUMNS: GridColDef[] = [
  {
    field: "date",
    headerName: "Дата",
    width: 200,
    sortable: false,
  },
  {
    field: "time",
    headerName: "Время",
    width: 180,
    sortable: false,
  },
  {
    field: "product",
    headerName: "Товар",
    width: 280,
    sortable: false,
  },
  {
    field: "amount",
    headerName: "Кол-во",
    width: 70,
    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 = () => (
  <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": {
        padding: "0 25px",
        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": {
        padding: "0 25px",
        width: "100%",
        "&:hover": {
          background: "#F2F3F7",
        },
      },
    }}
  />
);