<script lang="ts">
	import { recipeFromMachineQuery, recipeFromServerQuery } from '$lib/core/stores/recipeStore';
	import { onMount } from 'svelte';
	import { MediaQuery } from 'svelte/reactivity';
	import { get } from 'svelte/store';

	import * as Dialog from '$lib/components/ui/dialog/index';
	import RecipeDetail from './recipe-details/recipe-detail.svelte';
	import { MenuStatus, matchMenuStatus } from '$lib/core/types/menuStatus';

	import * as adb from '$lib/core/adb/adb';

	let open = $state(false);
	const isDesktop = new MediaQuery('(min-width: 768px)');

	let currentData: any = $state();

	let hasAlreadyTestBrewing: boolean = $state(false);
	let hasPendingChange: boolean = $state(false);
	let currentMenuStatus: MenuStatus = $state(MenuStatus.drafted);

	const {
		productCode,
		refPage
	}: {
		productCode: string;
		refPage: string;
	} = $props();

	async function onPendingChange(newChange: { target: string; value: any }) {
		console.log('detect pending change', matchMenuStatus(currentData.MenuStatus));
		hasPendingChange = true;

		let originalMenuStatus = matchMenuStatus(currentData.MenuStatus);

		// hasAlreadyTestBrewing =
		// 	originalMenuStatus == MenuStatus.pendingOnline || originalMenuStatus == MenuStatus.ready;

		//

		// if (hasAlreadyTestBrewing) {
		// 	currentMenuStatus = MenuStatus.pendingOnline;
		// }

		currentData.MenuStatus = MenuStatus.pendingOnline;

		if (newChange.target === 'recipeList') {
			// currentData.recipes = newChange.value;
			//
			// TODO: build into structure, flatten fields into 1 layer, strip off `id` (row id)
			console.log(newChange);
		}

		// await adb.push('/sdcard/coffeevending/.curr.brewing.json', JSON.stringify(currentData));
		//
		//
		//
		// send data to some channel then if command `brew`, invoke `SetCurrentRecipeToMake`
		//
	}

	onMount(() => {
		//
		if (refPage === 'brew') {
			// fetch from store
			let recipeDevSnapshot = get(recipeFromMachineQuery) ?? {};
			let recipe01Snap = recipeDevSnapshot['recipe'];
			if (recipe01Snap) {
				currentData = recipe01Snap[productCode] ?? {};
				if (currentData.MenuStatus) {
					currentMenuStatus = matchMenuStatus(currentData.MenuStatus);
				}
			}
		} else if (refPage === 'overview') {
			let recipeServerSnapshot = get(recipeFromServerQuery) ?? {};
			let recipe01Snap = recipeServerSnapshot['recipe'];
			if (recipe01Snap) {
				currentData = recipe01Snap[productCode] ?? {};
				console.log(`current data : ${JSON.stringify(Object.keys(recipe01Snap))}`);
				if (currentData.MenuStatus) {
					currentMenuStatus = matchMenuStatus(currentData.MenuStatus);
				}
			}
		}
	});
</script>

{#if isDesktop.current}
	<Dialog.Root bind:open>
		<Dialog.Trigger onselect={(e) => e.preventDefault()}>View</Dialog.Trigger>
		<Dialog.Content class="sm:max-w-3/4">
			<Dialog.Header>
				<Dialog.Title>Edit Recipe {productCode}</Dialog.Title>
				<Dialog.Description
					>Make changes to selected menu here. Click "save" when done or "test" for testing with
					connected machine
				</Dialog.Description>
			</Dialog.Header>

			<!-- render more -->
			<RecipeDetail recipeData={currentData} {onPendingChange} {refPage} />
		</Dialog.Content>
	</Dialog.Root>
{:else}{/if}
