<script lang="ts">
	import { addEmitter } from '../AddModal.svelte';
	import Icon from '../utils/Icon.svelte';
	import { jobsEmitter } from './Jobs.svelte';
	import api, { currentUser, logout } from '$lib/api';
	import Selector, { type SelectorValue } from '../utils/Selector.svelte';
	import { i18n } from '$lib/i18n';
	import { goto } from '$app/navigation';
	import { onMount } from 'svelte';
	import { vaultInfo } from '$lib/util/info';
	import { slide } from 'svelte/transition';

	let selector: Selector;
	let userDropdown = false;

	let lastSearched: SelectorValue[] = [];

	function addLastSearched(value: SelectorValue) {
		switch (value.t) {
			case 'Address':
				lastSearched = lastSearched.filter((v) => v.t !== 'Address' || v.c !== value.c);
				break;
			case 'Attribute':
				lastSearched = lastSearched.filter((v) => v.t !== 'Attribute' || v.name !== value.name);
				break;
		}
		lastSearched.unshift(value);
		lastSearched = lastSearched.slice(0, 10);
	}

	async function onInput(event: CustomEvent<SelectorValue>) {
		const value = event.detail;
		if (!value) return;

		switch (value.t) {
			case 'Address':
				addLastSearched(value);
				goto(`/browse/${value.c}`);
				break;
			case 'Attribute':
				addLastSearched(value);
				{
					const attributeAddress = await api.componentsToAddress({
						t: 'Attribute',
						c: value.name
					});
					goto(`/browse/${attributeAddress}`);
				}
				break;
		}
		selector.reset();

		// searchQuery = event.detail;

		// if (searchQuery.length > 0) {
		//   navigate(`/search/${encodeURIComponent(searchQuery)}`, {
		//     replace: $location.pathname.includes("search"),
		//   });
		// }
	}

	let fileInput: HTMLInputElement;

	function onFileChange() {
		if (fileInput.files?.length) {
			addEmitter.emit('files', Array.from(fileInput.files));
		}
	}

	onMount(() => {
		addEmitter.on('choose', () => fileInput.click());
	});

	async function rescan() {
		await api.refreshVault();
		jobsEmitter.emit('reload');
	}
</script>

<svelte:body
	on:click={() => {
		userDropdown = false;
	}}
/>

<div class="header">
	<h1>
		<a href="/">
			<img class="logo" src="/assets/upend.svg" alt="UpEnd logo" />
			<div class="name">UpEnd</div>
		</a>
	</h1>
	<div class="input">
		<Selector
			types={['Address', 'NewAddress', 'Attribute']}
			placeholder={$i18n.t('Search or add') || ''}
			on:input={onInput}
			bind:this={selector}
			emptyOptions={lastSearched}
		>
			<Icon name="search" slot="prefix" />
		</Selector>
	</div>
	<button on:click={() => addEmitter.emit('choose')}>
		<Icon name="upload" />
		<input type="file" multiple bind:this={fileInput} on:change={onFileChange} />
	</button>
	<button on:click={() => rescan()} title="Rescan vault">
		<Icon name="refresh" />
	</button>
	<button
		class="user"
		disabled={$vaultInfo?.public}
		on:click|stopPropagation={() => (userDropdown = true)}
	>
		<Icon name="user" />
	</button>
	{#if userDropdown}
		<!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
		<div class="user-dropdown" transition:slide on:click|stopPropagation={() => {}}>
			<div class="user">
				<Icon plain name="user" />
				{$currentUser || '???'}
			</div>
			<hr />
			<button on:click={() => logout()}> <Icon name="log-out" />{$i18n.t('Log out')}</button>
		</div>
	{/if}
</div>

<style lang="scss">
	.header {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem;
		height: 3.5rem;
		border-bottom: 1px solid var(--foreground);

		background: var(--background);

		h1 {
			font-size: 16pt;
			font-weight: normal;
			margin: 0;

			:global(a) {
				display: flex;
				align-items: center;

				color: var(--foreground-lightest);
				text-decoration: none;
				font-weight: normal;
			}

			img {
				margin-right: 0.5em;
			}
		}

		.logo {
			display: inline-block;
			height: 1.5em;
		}

		.input {
			flex-grow: 1;
			min-width: 3rem;
		}
	}

	.user-dropdown {
		background: var(--background);
		border-radius: 4px;
		border: 1px solid var(--foreground);
		padding: 0.5em;
		position: absolute;
		top: 3.5rem;
		right: 0.5rem;
		box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
		z-index: 99;
	}

	@media screen and (max-width: 600px) {
		.name {
			display: none;
		}
	}
</style>
