"use client";

import { FC, useState } from "react";
import { Grid, Box } from "@mui/material";
import { GridColDef } from "@mui/x-data-grid-pro";
import { StyledDataGrid } from "app/(main)/_components/StyledDataGrid";
import { Button, List, typography } from "@link-stack/ui";
import { useRouter } from "next/navigation";
import { TicketCreateDialog } from "./TicketCreateDialog";

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

export const TicketList: FC<TicketListProps> = ({ title, tickets }) => {
  const [dialogOpen, setDialogOpen] = useState(false);
  const router = useRouter();
  let gridColumns: GridColDef[] = [
    {
      field: "number",
      headerName: "Number",
      flex: 1,
    },
    {
      field: "title",
      headerName: "Title",
      flex: 3,
    },
    {
      field: "customer",
      headerName: "Sender",
      valueGetter: (value: any) => value?.fullname,
      flex: 1,
    },
    {
      field: "createdAt",
      headerName: "Created At",
      valueGetter: (value: any) => new Date(value).toLocaleString(),
      flex: 1,
    },
    {
      field: "updatedAt",
      headerName: "Updated At",
      valueGetter: (value: any) => new Date(value).toLocaleString(),
      flex: 1,
    },
    {
      field: "group",
      headerName: "Group",
      valueGetter: (value: any) => value?.name,
      flex: 1,
    },
  ];

  const onRowClick = (id: any) => {
    router.push(`/tickets/${id}`);
  };

  return (
    <>
      <List
        title={title}
        rows={tickets}
        columns={gridColumns}
        onRowClick={onRowClick}
        getRowID={(row: any) => {
          console.log({ row });
          return row.internalId;
        }}
        buttons={
          <Grid container direction="row-reverse" alignItems="center">
            <Grid item>
              <Button
                onClick={() => setDialogOpen(true)}
                text="Create"
                color="primary"
              />
            </Grid>
          </Grid>
        }
      />
      <TicketCreateDialog
        open={dialogOpen}
        closeDialog={() => setDialogOpen(false)}
      />
    </>
  );
};
