import type { Route } from ".react-router/types/src/+types/root";
import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";
import { getBookingById } from "@/lib/features/bookings/query";
import type {
  CoreBooking,
  CoreBookingUnitDetailed,
} from "@/lib/features/bookings/types";
import type { CoreResponse } from "@/lib/features/types";
import { type LoaderFunctionArgs } from "react-router";
import BookingClientPage from "./_client";

export const handle = {
  breadcrumb: ({ params }: { params: { bookingId: string } }) => (
    <BreadCrumbLink
      links={[
        {
          label: "Bookings",
          to: "/admin/bookings",
        },
        {
          label: params.bookingId,
        },
      ]}
    />
  ),
};

export async function loader({ params, request }: LoaderFunctionArgs) {
  const bookingId = params.bookingId as string;
  const url = new URL(request.url);
  const unitId = url.searchParams.get("unit");
  const bookingRes = await getBookingById(bookingId, request);
  let unit: CoreBookingUnitDetailed | undefined = undefined;
  if (unitId) {
    unit = bookingRes?.data?.booking?.units?.find((unit) => unit.id === unitId);
  }
  return { bookingRes, unit: unit ?? bookingRes?.data?.booking?.units[0] };
}

const BookingPage: React.FC<Route.ComponentProps> = ({ loaderData }) => {
  const { bookingRes, unit } = loaderData as unknown as {
    bookingRes: CoreResponse<{
      booking: CoreBooking;
    }>;
    unit: CoreBookingUnitDetailed;
  };
  return (
    <BookingClientPage booking={bookingRes?.data?.booking ?? {}} unit={unit} />
  );
};

export default BookingPage;