import { BuildTable } from "@/components/blocks/Table/table";
import type { MembershipClubChargeCenter } from "@/lib/features/charge-centers/models";
import { Button, Flex, Stack, Title } from "@mantine/core";
import { IconPlus } from "@tabler/icons-react";
import type { MRT_ColumnDef, MRT_RowData } from "mantine-react-table";
import { useNavigate } from "react-router";

const columns: MRT_ColumnDef<MembershipClubChargeCenter>[] = [
  {
    accessorKey: "name",
    header: "Name",
  },
  {
    accessorKey: "currency",
    header: "Currency",
  },
  {
    accessorKey: "viewpoint_charge_center_id",
    header: "View Point Charge Center ID",
  },
  {
    accessorFn: (data) => data.note ?? "NA",
    header: "Note",
  },
];

const ChargeCenterClientPage: React.FC<{
  tableProps: { data: MembershipClubChargeCenter[]; totalRows: number };
}> = ({ tableProps }) => {
  const navigate = useNavigate();
  const handleRowClick = (rowData: MRT_RowData) => {
    const row = rowData as MembershipClubChargeCenter;
    void navigate(`${row.id}`);
  };
  return (
    <Stack>
      <Flex justify={"space-between"} align={"center"}>
        <Title order={6}>Charge Centers</Title>
        <Button
          variant="filled"
          bg={"blue.1"}
          c={"blue.9"}
          onClick={() => {
            void navigate(`new`);
          }}
        >
          <IconPlus size={12} />
          Add a new Charge Center
        </Button>
      </Flex>

      <BuildTable
        data={tableProps.data}
        columns={columns}
        totalRows={tableProps.totalRows}
        needPagination={false}
        onRowClick={handleRowClick}
      />
    </Stack>
  );
};

export default ChargeCenterClientPage;