"use client";

import { FC } from "react";
import { Grid, Box } from "@mui/material";
import { GridColDef } from "@mui/x-data-grid-pro";
import { StyledDataGrid } from "../../../_components/StyledDataGrid";
import { Button } from "app/_components/Button";
import { typography } from "app/_styles/theme";
import { useRouter } from "next/navigation";

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
          container
          direction="row"
          justifyContent="space-between"
          alignItems="center"
        >
          <Grid item>
            <Box
              sx={{
                backgroundColor: "#ddd",
                px: "8px",
                pb: "16px",
                ...typography.h4,
                fontSize: 24,
              }}
            >
              {title}
            </Box>
          </Grid>
          <Grid item>
            <Button href="/tickets/create" text="Create" color="#1982FC" />
          </Grid>
        </Grid>
        <Grid item>
          <StyledDataGrid
            name={title}
            columns={gridColumns}
            rows={tickets}
            onRowClick={rowClick}
          />
        </Grid>
      </Grid>
    </Box>
  );
};
