import { BuildTable } from "@/components/blocks/Table/table";
import type { MembershipAccountType } from "@/lib/features/membership-account-types/models";
import { Button, Flex, Stack, Text, 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<MembershipAccountType>[] = [
  {
    accessorKey: "ext_account_type_id",
    header: "Viewpoint Account Type ID",
  },
  {
    accessorKey: "name",
    header: "Account Type Name",
  },
  {
    accessorKey: "is_active",
    header: "Is Active?",
    accessorFn: (row) => (
      <Text tt={"capitalize"} fz={12}>
        {row.is_active ? "TRUE" : "FALSE"}
      </Text>
    ),
  },
];
const MembershipAccountTypeClientPage: React.FC<{
  tableProps: { data: MembershipAccountType[]; totalRows: number };
}> = ({ tableProps }) => {
  const navigate = useNavigate();
  const handleRowClick = (rowData: MRT_RowData) => {
    const row = rowData as MembershipAccountType;
    void navigate(`${row.id}`);
  };
  return (
    <Stack>
      <Flex justify={"space-between"} align={"center"}>
        <Title order={6}>Membership Clubs</Title>
        <Button
          variant="filled"
          bg={"blue.1"}
          c={"blue.9"}
          onClick={() => {
            void navigate(`new`);
          }}
        >
          <IconPlus size={12} />
          Add a new account type
        </Button>
      </Flex>
      <BuildTable
        data={tableProps.data}
        columns={columns}
        totalRows={tableProps.totalRows}
        onRowClick={handleRowClick}
      />
    </Stack>
  );
};

export default MembershipAccountTypeClientPage;