import { FC } from "react";
import { Grid, Box } from "@mui/material";
import { GridColDef } from "@mui/x-data-grid-pro";
import { StyledDataGrid } from "./StyledDataGrid";
import { typography } from "styles/theme";
import { useRouter } from "next/router";

interface TicketListProps {
  title: string;
  tickets: any;
}

export const TicketList: FC<TicketListProps> = ({ title, tickets }) => {
  const router = useRouter();
  let gridColumns: GridColDef[] = [
    {
      field: "number",
      headerName: "Number",
      flex: 1,
    },
    {
      field: "title",
      headerName: "Title",
      flex: 1,
    },
    {
      field: "customer",
      headerName: "Sender",
      valueGetter: (params) => params.row?.customer?.fullname,
      flex: 1,
    },
    {
      field: "group",
      headerName: "Group",
      valueGetter: (params) => params.row?.group?.name,
      flex: 1,
    },
  ];
  console.log({ tickets });
  const rowClick = ({ row }) => {
    router.push(`/tickets/${row.internalId}`);
  };

  return (
    <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
      <Grid container direction="column">
        <Grid item>
          <Box
            sx={{
              backgroundColor: "#ddd",
              px: "8px",
              pb: "16px",
              ...typography.h4,
              fontSize: 24,
            }}
          >
            {title}
          </Box>
        </Grid>
        <Grid item>
          <StyledDataGrid
            name={title}
            columns={gridColumns}
            rows={tickets}
            onRowClick={rowClick}
          />
        </Grid>
      </Grid>
    </Box>
  );
};