<script lang="ts">
	import { LabelLoadedStore } from '$lib/label/adapter/presenter/labelLoadedStore';
	import ColorCode from '$lib/label/framework/ui/ColorCode.svelte';
	import EditLabelDialog, {
		type EditLabelDialogFormParams,
	} from '$lib/label/framework/ui/EditLabelDialog.svelte';
	import PostLabel from '$lib/label/framework/ui/PostLabel.svelte';
	import { getContext, onMount } from 'svelte';

	const { id }: { id: number } = $props();

	const labelLoadedStore = getContext<LabelLoadedStore>(LabelLoadedStore.name);
	const labelLoadedState = $derived($labelLoadedStore);
	const { trigger: loadLabel } = labelLoadedStore;
	const label = $derived(labelLoadedState.data);

	const formDefaultValues: EditLabelDialogFormParams | null = $derived.by(() => {
		if (labelLoadedState.data === null) {
			return null;
		}
		return {
			name: labelLoadedState.data.name,
			color: labelLoadedState.data.color.hexWithoutAlpha,
		};
	});

	async function onSubmit(params: EditLabelDialogFormParams): Promise<boolean> {
		return true;
	}

	onMount(() => loadLabel(id));
</script>

<div class="dashboard-container mb-10">
	<div class="flex flex-row items-center justify-between">
		<h1 class="py-16 text-5xl font-bold text-gray-800">Label Details</h1>
		<EditLabelDialog
			title="Update Label"
			triggerButtonText="Edit"
			disabled={!labelLoadedState.isSuccess()}
			defaultValues={formDefaultValues ?? undefined}
			{onSubmit}
		/>
	</div>
	<div class="grid grid-cols-[auto_1fr] gap-x-8 gap-y-3">
		<span class="font-medium whitespace-nowrap">ID</span>
		<span>{label?.id}</span>

		<span class="font-medium whitespace-nowrap">Name</span>
		<span>{label?.name}</span>

		<span class="font-medium whitespace-nowrap">Color</span>
		<div class="content-center">
			{#if label}
				<ColorCode color={label.color} />
			{/if}
		</div>

		<span class="font-medium whitespace-nowrap">Preview</span>
		<div class="content-center">
			{#if label}
				<PostLabel {label} />
			{/if}
		</div>
	</div>
</div>
