<script lang="ts">
import { fs_encode_path, fs_node_icon } from "lib/FilesystemAPI.svelte"
import type { FSNavigator } from "filesystem/FSNavigator";
import { FileAction, type FileActionHandler } from "./FileManagerLib";

let {
	nav,
	file_event,
	show_hidden = false,
	large_icons = false,
	hide_edit = false
}: {
	nav: FSNavigator;
	file_event: FileActionHandler
	show_hidden?: boolean
	large_icons?: boolean
	hide_edit?: boolean
} = $props();
</script>

<div class="directory">
	{#each $nav.children as child, index (child.path)}
		<a
			href={"/d"+fs_encode_path(child.path)}
			onclick={e => file_event(FileAction.Click, index, e)}
			oncontextmenu={e => file_event(FileAction.Context, index, e)}
			class="node"
			class:node_selected={child.fm_selected}
			class:hidden={child.name.startsWith(".") && !show_hidden}
		>
			<img src={fs_node_icon(child, 64, 64)} class="node_icon" class:large_icons alt="icon"/>
			<div class="node_name">
				{child.name}
			</div>

			{#if child.is_shared()}
				<i class="icon" title="This file / directory is shared. Click to open public link">share</i>
			{/if}

			{#if !hide_edit}
			<button
				class="action_button flat"
				onclick={e => file_event(FileAction.Menu, index, e)}
			>
				<i class="icon">menu</i>
			</button>
			{/if}
		</a>
	{/each}
</div>

<style>
.directory {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
	gap: 8px;
	padding: 8px;
	max-width: 100%;
	overflow: hidden;
}
.node {
	display: flex;
	flex-direction: row;
	text-decoration: none;
	color: var(--body_text-color);
	padding: 2px;
	align-items: center;
	background: var(--body_background);
	/* backdrop-filter: blur(4px); */
	border-radius: 4px;
	gap: 6px;
}
.node:hover:not(.node_selected) {
	background: var(--input_hover_background);
	color: var(--input_text);
	text-decoration: none;
}
.node.node_selected {
	background-color: var(--highlight_color) !important;
	color: var(--highlight_text_color);
}
.node>* {
	flex: 0 0 content;
}
.node_icon {
	height: 2em;
	width: 2em;
	vertical-align: middle;
}
.node_name {
	flex: 1 1 content;
	word-break: break-all;
	line-height: 1em;
}
.hidden {
	display: none;
}
.flat {
	background: none;
	color: var(--body_text_color);
	box-shadow: none;
	margin: 0;
}

/* Large icon mode only supported on wide screens */
@media (min-width: 500px) {
	.node_icon.large_icons {
		height: 4em;
		width: 4em;
	}
}
</style>
