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

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

const COLUMNS: GridColDef[] = [
  {
    field: "id",
    headerName: "ID",
    width: 30,
    sortable: false,
  },
  {
    field: "dateTime",
    headerName: "Дата / время",
    width: 150,
    sortable: false,
  },
  {
    field: "email",
    headerName: "Почта",
    width: 110,
    sortable: false,
  },
  {
    field: "summa",
    headerName: "Сумма",
    type: "number",
    width: 110,
    sortable: false,
  },
  {
    field: "idLong",
    headerName: "ID long",
    type: "number",
    width: 110,
    sortable: false,
  },
  {
    field: "paymentStatus",
    headerName: "Статус платежа",
    width: 160,
    sortable: false,
  },
];

const ROWS = [
  {
    id: "row_1",
    dateTime: "22.09.22 12:15",
    email: "asd@mail.ru",
    summa: 100500,
    idLong: 123,
    paymentStatus: "В обработке",
  },
  {
    id: "row_2",
    dateTime: "22.09.22 12:15",
    email: "asd@mail.ru",
    summa: 100500,
    idLong: 123,
    paymentStatus: "В обработке",
  },
  {
    id: "row_3",
    dateTime: "22.09.22 12:15",
    email: "asd@mail.ru",
    summa: 100500,
    idLong: 123,
    paymentStatus: "В обработке",
  },
  {
    id: "row_4",
    dateTime: "22.09.22 12:15",
    email: "asd@mail.ru",
    summa: 100500,
    idLong: 123,
    paymentStatus: "В обработке",
  },
  {
    id: "row_5",
    dateTime: "22.09.22 12:15",
    email: "asd@mail.ru",
    summa: 100500,
    idLong: 123,
    paymentStatus: "В обработке",
  },
];

export const PurchaseTab = () => {
  const theme = useTheme();

  return (
    <DataGrid
      rows={ROWS}
      columns={COLUMNS}
      pageSize={5}
      rowsPerPageOptions={[5]}
      disableSelectionOnClick
      experimentalFeatures={{ newEditingApi: true }}
      sx={{
        color: theme.palette.secondary.main,
        height: "350px",
        overflowY: "auto",
        "& .MuiDataGrid-iconSeparator": {
          display: "none",
        },
        "& .css-levciy-MuiTablePagination-displayedRows": {
          color: theme.palette.secondary.main,
        },
        "& .MuiSvgIcon-root": {
          color: theme.palette.secondary.main,
        },
      }}
    />
  );
};