import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";
import type { MembershipAccountType } from "@/lib/features/membership-account-types/models";
import { searchMembershipAccountType } from "@/lib/features/membership-account-types/query";
import type { CoreAPIPagination, CoreResponse } from "@/lib/features/types";
import React from "react";
import type { Route } from "./+types/page";
import MembershipAccountTypeClientPage from "./_client";

export const handle = {
  breadcrumb: () => (
    <BreadCrumbLink
      links={[
        {
          label: "Account Types",
          to: "/admin/memberships/account-types",
        },
        {
          label: "Overview",
        },
      ]}
    />
  ),
};

export async function loader({ request }: Route.LoaderArgs) {
  const url = new URL(request.url);
  const page = parseInt(url.searchParams.get("page") ?? "1");
  const pageSize = parseInt(url.searchParams.get("pageSize") ?? "15");
  const search = url.searchParams.get("search") ?? undefined;
  const searchResponse = await searchMembershipAccountType(
    page,
    pageSize,
    search,
    { headers: request.headers },
  );
  return searchResponse;
}

const MembershipAccountTypesPage: React.FC<Route.ComponentProps> = ({
  loaderData,
}) => {
  const { data, success } = loaderData as unknown as CoreResponse<{
    account_types: MembershipAccountType[];
    pagination: CoreAPIPagination;
  }>;
  return (
    <MembershipAccountTypeClientPage
      tableProps={{
        data: success ? (data?.account_types ?? []) : [],
        totalRows: data?.pagination?.total ?? 0,
      }}
    />
  );

};

export default MembershipAccountTypesPage;