<script lang="ts">
import { onMount, tick } from "svelte";
import Spinner from "util/Spinner.svelte";
import { fs_node_type } from "lib/FilesystemAPI.svelte";
import FileManager from "filesystem/filemanager/FileManager.svelte";
import TrashBin from "filesystem/filemanager/TrashBin.svelte";
import Audio from "./Audio.svelte";
import File from "./File.svelte";
import Image from "./Image.svelte";
import Pdf from "./PDF.svelte";
import Text from "./Text.svelte";
import Video from "./Video.svelte";
import Torrent from "./Torrent.svelte";
import Zip from "./Zip.svelte";
import CustomBanner from "./CustomBanner.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import FsUploadWidget from "filesystem/upload_widget/FSUploadWidget.svelte";
import EditWindow from "filesystem/edit_window/EditWindow.svelte";
import DetailsWindow from "filesystem/DetailsWindow.svelte";
import SearchBar from "filesystem/SearchBar.svelte";

let {
	nav,
	upload_widget,
	edit_window,
	details_window,
	search_bar,
}: {
	nav: FSNavigator
	upload_widget: FsUploadWidget
	edit_window: EditWindow
	details_window: DetailsWindow
	search_bar: SearchBar
} = $props();

let viewer: any = $state()
let viewer_type = $state("")
let last_path = ""

onMount(() => nav.subscribe(state_update))

const state_update = async () => {
	if (!nav.initialized || nav.base.path === last_path) {
		return
	}
	last_path = nav.base.path

	// Update the viewer area with the right viewer type
	viewer_type = fs_node_type(nav.base)

	console.debug("Previewing file", nav.base, "viewer type", viewer_type)

	// Render the viewer component and set the file type
	await tick()
	if (viewer && viewer.update) {
		viewer.update()
	}
}

export const toggle_playback = () => {
	if (viewer && viewer.toggle_playback) {
		viewer.toggle_playback()
		return true
	}
	return false
}
export const toggle_mute = () => {
	if (viewer && viewer.toggle_mute) {
		viewer.toggle_mute()
		return true
	}
	return false
}
export const toggle_fullscreen = () => {
	if (viewer && viewer.toggle_fullscreen) {
		viewer.toggle_fullscreen()
		return true
	}
	return false
}
export const seek = (delta: number) => {
	if (viewer && viewer.seek) {
		viewer.seek(delta)
	}
}
</script>

{#if viewer_type === ""}
	<div class="center">
		<Spinner/>
	</div>
{:else if viewer_type === "dir" && $nav.base.name === ".Trash"}
	<TrashBin nav={nav} root_path={$nav.path[$nav.path.length - 2].path}/>
{:else if viewer_type === "dir"}
	<FileManager nav={nav} upload_widget={upload_widget} edit_window={edit_window} search_bar={search_bar}>
		<CustomBanner path={$nav.path}/>
	</FileManager>
{:else if viewer_type === "audio"}
	<Audio nav={nav} bind:this={viewer}>
		<CustomBanner path={$nav.path}/>
	</Audio>
{:else if viewer_type === "image"}
	<Image nav={nav} bind:this={viewer}/>
{:else if viewer_type === "video"}
	<Video node={$nav.base} bind:this={viewer} open_sibling={(d) => nav.open_sibling(d)}/>
{:else if viewer_type === "pdf"}
	<Pdf node={$nav.base} bind:this={viewer}/>
{:else if viewer_type === "text"}
	<Text node={$nav.base} bind:this={viewer}>
		<CustomBanner path={$nav.path}/>
	</Text>
{:else if viewer_type === "torrent"}
	<Torrent node={$nav.base} bind:this={viewer}>
		<CustomBanner path={$nav.path}/>
	</Torrent>
{:else if viewer_type === "zip"}
	<Zip node={$nav.base} bind:this={viewer}>
		<CustomBanner path={$nav.path}/>
	</Zip>
{:else}
	<File node={$nav.base} open_details={() => details_window.toggle()}>
		<CustomBanner path={$nav.path}/>
	</File>
{/if}

<style>
.center{
	position: relative;
	display: block;
	margin: auto;
	width: 100px;
	max-width: 100%;
	height: 100px;
	max-height: 100%;
	top: 50%;
	transform: translateY(-50%);
}
</style>
