<style>
	model-viewer {
		height: 100%;
		width: 100%;
	}
</style>

<script>
	import { preloadCode } from '$app/navigation';
	import Panel from '$lib/components/ui/Panel.svelte';
	import { onMount } from 'svelte';
	export let data;

	onMount(() => {
		import('@google/model-viewer');
	});

	let progress = 0;
	let hideProgressScreen = false;
	$: style = `width: ${progress}%`;

	function onProgress({ detail }) {
		progress = Math.ceil(detail.totalProgress * 100.0);
		if (progress == 100) {
			setTimeout(() => {
				hideProgressScreen = true;
			}, 250);
		} else hideProgressScreen = false;
	}
</script>

<div class="h-full w-full bg-neutral-100 p-4">
	<model-viewer
		src={data.url}
		camera-controls
		field-of-view="auto"
		max-field-of-view="10deg"
		min-field-of-view="0.1deg"
		on:progress={onProgress}
	>
		<div
			slot="progress-bar"
			class="flex items-center justify-center h-full w-full transition-all delay-250"
			class:opacity-0={hideProgressScreen}
			class:hidden={hideProgressScreen}
		>
			<Panel class="w-72 bg-gray-50 flex items-center flex-col"
				><p class="mb-5">Loading {progress}%</p>
				<div class="h-1 w-full bg-neutral-200 dark:bg-neutral-600">
					<div class="h-1 bg-blue-500" {style} />
				</div></Panel
			>
		</div>
	</model-viewer>
</div>
