<script lang="ts">
import { global_navigator } from "filesystem/FSNavigator";
import { fs_encode_path, fs_node_icon, FSNode } from "lib/FilesystemAPI.svelte";
import { highlight_current_page } from "lib/HighlightCurrentPage";
import { onMount } from "svelte";
import MenuEntry from "./MenuEntry.svelte";

let { menu_collapsed }: { menu_collapsed: boolean } = $props();
let siblings: FSNode[] = $state([])

onMount(() => {
	return global_navigator.subscribe(async () => {
		siblings = await global_navigator.get_siblings()
	})
})
</script>

<MenuEntry id="tree_parents" collapsed={menu_collapsed}>
	{#snippet title()}
		<div class="title">Parent directories</div>
		<button title="Navigate up" onclick={() => global_navigator.navigate_up()}>
			<i class="icon">north</i>
		</button>
	{/snippet}

	{#snippet body()}
		{#each $global_navigator.path.slice(0, $global_navigator.path.length-1) as node (node.id)}
			{#if node.type === "dir"}
				<div class="row">
					<a class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}">
						<img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/>
						<span class:hide={menu_collapsed}>{node.name}</span>
					</a>
				</div>
			{/if}
		{/each}
	{/snippet}
</MenuEntry>

<MenuEntry id="tree_siblings" collapsed={menu_collapsed}>
	{#snippet title()}
		<div class="title">Siblings</div>
	<button title="Open previous sibling" onclick={() => global_navigator.open_sibling(-1)}>
		<i class="icon">west</i>
	</button>
	<button title="Open next sibling" onclick={() => global_navigator.open_sibling(1)}>
		<i class="icon">east</i>
	</button>
	{/snippet}

	{#snippet body()}
		{#each siblings as node (node.id)}
			{#if !node.is_hidden()}
				<div class="row">
					<a class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}" use:highlight_current_page>
						<img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/>
						<span class:hide={menu_collapsed}>{node.name}</span>
					</a>
				</div>
			{/if}
		{/each}
	{/snippet}
</MenuEntry>

<style>
.title {
	flex: 1 1 auto;
	text-align: center;
	margin: 3px;
}
.row {
	display: flex;
	flex-direction: row;
}
.row>a {
	flex: 1 1 auto;
}
.row>a>span {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.button {
	background: none;
	box-shadow: none;
}
.thumbnail {
	height: 1.5em;
	width: 1.5em;
	border-radius: 2px;
}
.hide {
	display: none;
}
</style>
