<script lang="ts">
	import Icon from "$lib/components/atoms/icon.svelte";
	import Title from "$lib/components/atoms/title.svelte";
	import MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
	import Button from "$lib/components/ui/button/button.svelte";
	import CheckoutConfirmationSection from "$lib/domains/checkout/checkout-confirmation-section.svelte";
	import CheckoutLoadingSection from "$lib/domains/checkout/checkout-loading-section.svelte";
	import CheckoutStepsIndicator from "$lib/domains/checkout/checkout-steps-indicator.svelte";
	import { checkoutVM } from "$lib/domains/checkout/checkout.vm.svelte";
	import InitialInfoSection from "$lib/domains/checkout/initial-info-section.svelte";
	import PaymentInfoSection from "$lib/domains/checkout/payment-info-section/index.svelte";
	import PaymentSummary from "$lib/domains/checkout/payment-summary.svelte";
	import PaymentVerificationSection from "$lib/domains/checkout/payment-verification-section.svelte";
	import { ckFlowVM } from "$lib/domains/ckflow/view/ckflow.vm.svelte";
	import { CheckoutStep } from "$lib/domains/order/data/entities";
	import { flightTicketStore } from "$lib/domains/ticket/data/store";
	import { onDestroy, onMount } from "svelte";
	import { toast } from "svelte-sonner";
	import SearchIcon from "~icons/solar/magnifer-linear";
	import type { PageData } from "./$types";

	let { data: pageData }: { data: PageData } = $props();

	onMount(() => {
		if (pageData.error) {
			toast.error(pageData.error.message, {
				description: pageData.error.userHint,
			});
			return;
		}
		if (!pageData.data) {
			return;
		}
		flightTicketStore.set(pageData.data);
		checkoutVM.loading = false;
		checkoutVM.setupPinger();

		setTimeout(async () => {
			await ckFlowVM.initFlow();
		}, 2000);
	});

	onDestroy(() => {
		checkoutVM.reset();
	});
</script>

<div class="grid h-full w-full place-items-center">
	<MaxWidthWrapper cls="p-4 md:p-8 lg:p-10 3xl:p-0">
		{#if !pageData.data || !!pageData.error}
			<div class="grid h-full min-h-screen w-full place-items-center">
				<div class="flex flex-col items-center justify-center gap-4">
					<Icon icon={SearchIcon} cls="w-12 h-12" />
					<Title size="h4" color="black">No ticket found</Title>
					<Button href="/search" variant="default">
						Search for another ticket
					</Button>
				</div>
			</div>
		{:else if checkoutVM.checkoutStep === CheckoutStep.Confirmation}
			<div class="grid w-full place-items-center p-4 py-32">
				<CheckoutConfirmationSection />
			</div>
		{:else}
			<CheckoutStepsIndicator />
			<div class="flex w-full flex-col gap-8 lg:flex-row">
				<div class="flex w-full flex-col">
					<div class="flex w-full flex-col gap-12">
						{#if checkoutVM.loading}
							<CheckoutLoadingSection />
						{:else if checkoutVM.checkoutStep === CheckoutStep.Initial}
							<InitialInfoSection />
						{:else if checkoutVM.checkoutStep === CheckoutStep.Payment}
							<PaymentInfoSection />
						{:else if checkoutVM.checkoutStep === CheckoutStep.Verification}
							<PaymentVerificationSection />
						{/if}
					</div>
				</div>
				<div
					class="grid w-full place-items-center lg:max-w-lg lg:place-items-start"
				>
					<div
						class="flex w-full flex-col gap-8 pt-8 md:max-w-md lg:max-w-full lg:pt-0"
					>
						<PaymentSummary />
					</div>
				</div>
			</div>
		{/if}
	</MaxWidthWrapper>
</div>
