<script lang="ts">
	import { page } from "$app/state";
	import ButtonLoadableText from "$lib/components/atoms/button-loadable-text.svelte";
	import MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
	import { Button } from "$lib/components/ui/button";
	import { Input } from "$lib/components/ui/input";
	import OrderMainInfo from "$lib/domains/order/view/order-main-info.svelte";
	import OrderMiscInfo from "$lib/domains/order/view/order-misc-info.svelte";
	import { trackVM } from "$lib/domains/order/view/track/track.vm.svelte";
	import { onMount } from "svelte";

	let searchDisabled = $derived(trackVM.loading || !trackVM.uid);

	onMount(() => {
		const uid = page.url.searchParams.get("uid");
		if (uid) {
			trackVM.uid = uid;
			trackVM.searchBooking();
		}
	});
</script>

<div
	class="grid h-full w-full place-items-center gap-12 p-8 pt-32 lg:p-12 lg:pt-32"
>
	<MaxWidthWrapper cls="flex max-w-7xl flex-col gap-8">
		<div class="flex flex-col gap-4">
			<h2 class="text-2xl font-bold">Track Your Booking</h2>
			<div class="flex gap-2">
				<Input
					placeholder="Enter your PNR number"
					bind:value={trackVM.uid}
				/>
				<Button
					disabled={searchDisabled}
					onclick={() => trackVM.searchBooking()}
				>
					<ButtonLoadableText
						loading={trackVM.loading}
						loadingText="Searching..."
						text="Search"
					/>
				</Button>
			</div>
			{#if trackVM.error}
				<p class="text-red-500">{trackVM.error}</p>
			{/if}
		</div>
	</MaxWidthWrapper>

	<MaxWidthWrapper cls="max-w-7xl w-full">
		<div class="grid w-full grid-cols-1 gap-8 lg:grid-cols-2">
			{#if trackVM.bookingData}
				<OrderMainInfo order={trackVM.bookingData} />
				<OrderMiscInfo order={trackVM.bookingData} />
			{/if}
		</div>
	</MaxWidthWrapper>
</div>
