<script lang="ts">
	import { flairStore, type Flair as FlairModel } from '$lib/FlairStore.svelte';
	import { deleteR, preventDefault, put } from '$lib/utils';
	import { onMount } from 'svelte';
	import NavBar from '../NavBar.svelte';
	import Flair from './Flair.svelte';

	let flair: FlairModel = $state({} as unknown as FlairModel);

	async function create() {
		try {
			await put('flair/', flair);
			flair = {} as unknown as FlairModel;
			flairStore.loadItems(true);
		} catch (e) {
			// TODO: Show to user
			console.log(e);
		}
	}

	async function remove(id: string) {
		try {
			await deleteR(`flair/${id}`);
			flairStore.loadItems(true);
		} catch (e) {
			// TODO: Show to user
			console.log(e);
		}
	}

	let edit: FlairModel | undefined = $state();

	onMount(() => {
		flairStore.loadItems();
	});

	async function update() {
		try {
			await put('flair/update', edit);
			edit = undefined;
			flairStore.loadItems(true);
		} catch (e) {
			// TODO: Show to user
			console.log(e);
		}
	}
</script>

<NavBar />

<div class="p-2 flex flex-col gap-2">
	<!-- Create -->
	<div class="card p-2 rounded-lg">
		<form class="flex flex-wrap gap-2" onsubmit={preventDefault(create)}>
			<fieldset>
				<label class="flabel" for="color">Color</label>
				<input required type="color" id="color" class="finput" bind:value={flair.color} />
			</fieldset>
			<fieldset class="flex-grow">
				<label class="flabel" for="name">Name</label>
				<input required id="name" class="w-full finput" bind:value={flair.name} />
			</fieldset>
			<fieldset class="flex-grow">
				<label class="flabel" for="expr">Expr</label>
				<input required id="expr" class="w-full finput" bind:value={flair.expr} />
			</fieldset>
			<div class="btns w-full">
				<button class="btn-confirm">Create</button>
			</div>
		</form>
	</div>
	<!-- List -->
	<div class="card rounded-lg p-2">
		<h1>Flairs</h1>
		{#each flairStore.flairs.filter((a) => !flair.name || ` ${flair.name} `.match(new RegExp(a.expr, 'i'))) as item}
			<div class="p-1 flex items-center gap-2">
				<button
					onclick={() => {
						edit = item;
					}}
				>
					<Flair {item} />
				</button>
				<div class="inline text-white">
					Expr: {item.expr}
				</div>
				<div class="flex-grow"></div>
				<button class="btn-danger" onclick={preventDefault(() => remove(item.id))}>
					Remove
				</button>
			</div>
			{#if item.id == edit?.id}
				<form onsubmit={preventDefault(update)} class="shadow-inner p-2 rounded-xl">
					<fieldset>
						<label class="flabel" for="color">Color</label>
						<input required type="color" id="color" bind:value={edit.color} />
					</fieldset>
					<fieldset>
						<label class="flabel" for="name">Name</label>
						<input required id="name" class="finput w-full" bind:value={edit.name} />
					</fieldset>
					<fieldset>
						<label class="flabel" for="expr">Expr</label>
						<input required id="expr" class="finput w-full" bind:value={edit.expr} />
					</fieldset>
					<fieldset>
						<label class="flabel" for="description">Description</label>
						<textarea
							required
							id="description"
							class="finput w-full"
							bind:value={edit.description}
						></textarea>
					</fieldset>
					<div class="btns w-full">
						<button class="btn-confirm">Save</button>
					</div>
				</form>
			{/if}
		{/each}
	</div>
</div>
