<script lang="ts">
	import { page } from '$app/state'

	import { SvelteToast } from '@zerodevx/svelte-toast'
	import '$lib/assets/app.css'
	interface Props {
		children?: import('svelte').Snippet
	}

	let { children }: Props = $props()

	// Default toast options
	const toastOptions = {
		duration: 5000, // duration of progress bar tween to the `next` value
		initial: 1, // initial progress bar value
		next: 0, // next progress value
		pausable: true, // pause progress bar tween on mouse hover
		dismissable: true, // allow dismiss with close button
		reversed: true, // insert new toast to bottom of stack
		intro: { y: -32 }, // toast intro fly animation settings
		theme: {} // css var overrides
	}

	document.getElementById('svelte-global-loader')?.remove()

	// Prevent scrolling over number inputs from changing their value
	function handleWheel(e: WheelEvent) {
		const target = e.target as HTMLElement
		if (target.tagName === 'INPUT' && (target as HTMLInputElement).type === 'number') {
			target.blur()
		}
		updateEditorSwipeGuard(e)
	}

	// macOS Chromium turns horizontal wheel overscroll into history navigation. Cancelling
	// wheel events can't block it (only a gesture's first event is cancelable; Monaco swallows
	// the rest), but Chromium honors root `overscroll-behavior-x`, so toggle it while over a
	// Monaco editor. Wheel also feeds this: editors mounting under a still cursor fire no pointerover.
	function updateEditorSwipeGuard(e: Event) {
		const overEditor = e.target instanceof Element && e.target.closest('.monaco-editor') != null
		const value = overEditor ? 'none' : ''
		if (document.documentElement.style.overscrollBehaviorX !== value) {
			document.documentElement.style.overscrollBehaviorX = value
			document.body.style.overscrollBehaviorX = value
		}
	}
</script>

<svelte:document onwheel={handleWheel} onpointerover={updateEditorSwipeGuard} />

<svelte:head>
	<!-- {#if !import.meta.env.PROD}
		<script
			data-project-id="JLtc2teApu4xqh47avxGx7oTAwY0rqAdVTqsV8MC"
			data-is-production-environment="false"
			src="https://snippet.meticulous.ai/v1/meticulous.js"
		></script>
	{/if} -->
	<title>{page.data?.stuff?.title ? `${page.data?.stuff?.title} | ` : ''}Windmill</title>
</svelte:head>

{@render children?.()}

<div class="wrap">
	<SvelteToast options={toastOptions} />
</div>

<style>
	.wrap {
		display: flex;
		font-family: 'Inter', sans-serif;
		width: 100%;
		height: 100%;
		justify-content: center;

		--toastContainerRight: auto;
		--toastContainerTop: auto;
		--toastContainerBottom: 1rem;
	}

	.wrap :global(._toastContainer) {
		height: 20rem;
		display: flex;
		flex-direction: column-reverse;
		overflow-y: auto;
		overflow-x: hidden;
	}
</style>
