<script lang="ts">
	import Container from "$lib/components/atoms/container.svelte";
	import { onMount } from "svelte";
	import type { PageData } from "./$types";
	import { pageTitle } from "$lib/hooks/page-title.svelte";
	import Badge from "$lib/components/ui/badge/badge.svelte";
	import Title from "$lib/components/atoms/title.svelte";
	import { toast } from "svelte-sonner";
	import OrderMainInfo from "$lib/domains/order/view/order-main-info.svelte";
	import OrderMiscInfo from "$lib/domains/order/view/order-misc-info.svelte";
	import { OrderStatus } from "$lib/domains/order/data/entities";
	import { snakeToSpacedPascal } from "$lib/core/string.utils";

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

	pageTitle.set("Order Details");

	function getStatusVariant(status: OrderStatus) {
		switch (status) {
			case OrderStatus.FULFILLED:
				return "success";
			case OrderStatus.CANCELLED:
				return "destructive";
			default:
				return "secondary";
		}
	}

	console.log(data.data);

	onMount(() => {
		if (data.error) {
			toast.error(data.error.message, {
				description: data.error.userHint,
			});
			return;
		}
	});
</script>

{#if data.data}
	<main class="grid w-full place-items-center gap-4">
		<Container containerClass="w-full flex flex-col gap-8">
			<div class="flex items-center justify-between gap-4 md:flex-row">
				<Title size="h3">Order Details</Title>
				<Badge variant={getStatusVariant(data.data?.status)}>
					{snakeToSpacedPascal(data.data?.status.toLowerCase())}
				</Badge>
			</div>

			<div
				class="grid h-full w-full grid-cols-1 gap-4 md:gap-6 lg:grid-cols-2 lg:gap-8"
			>
				<OrderMainInfo order={data.data} />
				<OrderMiscInfo order={data.data} />
			</div>
		</Container>
	</main>
{/if}
