import "./FileBrowser.css";
import { type Component, createSignal, Index, Show } from "solid-js";
import { FileIcon, FolderIcon, FolderOpenIcon } from "./icons/index.ts";

export type BrowserFolder = Map<string, string | BrowserFolder>;

export type FileHandler = (path: string) => void;

function isFolder(entry: string | BrowserFolder): entry is BrowserFolder {
	return typeof (entry as BrowserFolder).size === "number";
}

export const FileBrowser: Component<{
	root: BrowserFolder;
	handler: FileHandler;
}> = ({ root, handler }) => {
	const FileEntry: Component<{
		name: string;
		path: string;
	}> = ({ name, path }) => {
		return (
			<div class="file-label" onClick={[handler, path]}>
				<FileIcon />
				<span>{name}</span>
			</div>
		);
	};

	const FolderEntry: Component<{
		folder: BrowserFolder;
		name: string;
		open: boolean;
	}> = ({ folder, name, open }) => {
		const [isOpen, setIsOpen] = createSignal(open);

		return (
			<>
				<div class="file-label" onClick={() => setIsOpen(!isOpen())}>
					{isOpen() ? <FolderOpenIcon /> : <FolderIcon />}
					<span>{name}</span>
				</div>

				<Show when={isOpen()}>
					<FileList folder={folder} />
				</Show>
			</>
		);
	};

	const FileList: Component<{ folder: BrowserFolder }> = ({ folder }) => {
		return (
			<ul class="file-list">
				<Index each={[...folder.entries()]}>
					{(item, index) => {
						const [name, entry] = item();

						return (
							<li class="file-item">
								{isFolder(entry) ? (
									<FolderEntry folder={entry} name={name} open={index < 1} />
								) : (
									<FileEntry name={name} path={entry} />
								)}
							</li>
						);
					}}
				</Index>
			</ul>
		);
	};

	return (
		<div class="file-browser">
			<FileList folder={root} />
		</div>
	);
};