<script>
	import { onMount } from 'svelte';
	import { priority } from '$lib/stores/priority.js';
	import { colors } from '$lib/stores/colors.js';
	import { rounds } from '$lib/stores/rounds.js';
	import { categories } from '$lib/stores/categories.js';
	import { dev } from '$app/environment';

	// if (dev) {
	// 	console.log('Dev mode');
	// } else {
	// 	console.log('Not dev mode');
	// }

	window.document.body.oncontextmenu = function () {
		return false;
	};

	$: start = false;

	let footer_height = 8;
	$: setup_height = (100 - footer_height) / $priority.surfersCount - 2.2 / $priority.surfersCount;

	$: if ($priority.surfers) {
		SaveToLocalCahe();
	}

	onMount(async () => {
		let status = window.sessionStorage.getItem('status');
		if (status) {
			LoadFromLocalCache();
			// console.log(`loaded: ${JSON.stringify($priority.surfers)}`);
		}
	});

	function hasDuplicateColors() {
		const colors = [];

		console.log(JSON.stringify($priority.surfers));

		for (let i = 0; i < $priority.surfersCount; i++) {
			const color = $priority.surfers[i].color;

			if (colors.includes(color)) {
				console.log(`duplicate color: ${color}`);
				return true;
			}

			colors.push(color);
		}

		return false;
	}

	function ResetPriority() {
		for (let i = 0; i < $priority.surfersCount; i++) {
			$priority.surfers[i].priority = '';
		}
	}

	function StartHeat() {
		if (hasDuplicateColors()) {
			alert('Duplicate colors');
			return;
		}
		ResetPriority();
		start = true;
		SendPriority();
	}

	function StopHeat() {
		ResetLocalCache();
		start = false;
		ResetPriority();
		SendPriority();
	}

	function AddSurfer() {
		if ($priority.surfersCount < 6) {
			$priority.surfersCount += 1;
		}
	}

	function RemSurfer() {
		if ($priority.surfersCount > 2) {
			$priority.surfersCount -= 1;
		}
	}

	function ResetLocalCache() {
		console.log('ResetLocalCache');
		window.sessionStorage.clear();
		window.sessionStorage.setItem('status', false);
		console.log(`reset cache: ${JSON.parse(window.sessionStorage.getItem('priority'))}`);
		priority.reset();
		SendPriority();
	}

	function SaveToLocalCahe() {
		window.sessionStorage.setItem('status', true);
		window.sessionStorage.setItem('priority', JSON.stringify($priority));
		window.sessionStorage.setItem('start', JSON.stringify(start));
		console.log(`update cache: ${JSON.stringify($priority)}`);
	}

	function LoadFromLocalCache() {
		$priority = JSON.parse(window.sessionStorage.getItem('priority'));
		start = JSON.parse(window.sessionStorage.getItem('start'));
		console.log(`load cache: ${JSON.stringify($priority)}`);
	}

	async function ChangePriority(id) {
		console.log($priority.surfers[id]);
		if ($priority.surfers[id].priority === 'P') {
			for (let i = 0; i < $priority.surfersCount; i++) {
				if (i != id) {
					let pos = parseInt($priority.surfers[i].priority) - 1;
					if (pos === 1) {
						$priority.surfers[i].priority = 'P';
					} else {
						$priority.surfers[i].priority = pos.toString();
					}
				}
			}
			$priority.surfers[id].priority = $priority.surfersCount.toString();
		} else if ($priority.surfers[id].priority === '') {
			console.log(`priority empty; pressed: [${id}] ${$priority.surfers[id].priority}`);
			for (let i = 0; i < $priority.surfersCount; i++) {
				console.log(`looping(${id}): ${i} - ${$priority.surfers[i].priority}`);
				if (i != id) {
					if ($priority.surfers[i].priority === '') {
						console.log(`empty: [${i}] ${$priority.surfers[i].priority}`);
						continue;
					} else {
						console.log(`not empty: [${i}] ${$priority.surfers[i].priority}`);
						let pos = parseInt($priority.surfers[i].priority) - 1;
						if (pos === 1) {
							$priority.surfers[i].priority = 'P';
						} else {
							$priority.surfers[i].priority = pos.toString();
						}
					}
				}
				$priority.surfers[id].priority = $priority.surfersCount.toString();
			}
		} else {
			console.log(`pressed: [${id}] ${$priority.surfers[id].priority}`);
			let oldpos = parseInt($priority.surfers[id].priority);
			for (let i = 0; i < $priority.surfersCount; i++) {
				if (i != id) {
					console.log(
						`pos: [${i}] ${$priority.surfers[i].priority} ${$priority.surfers[i].priority > oldpos}`
					);
					if ($priority.surfers[i].priority != 'P') {
						let pos = parseInt($priority.surfers[i].priority);
						if (pos > oldpos) {
							console.log(`newpos: ${$priority.surfers[i].priority}`);
							$priority.surfers[i].priority = (pos - 1).toString();
						}
					}
				} else {
					$priority.surfers[i].priority = $priority.surfersCount.toString();
					console.log(`last: [${i}] ${$priority.surfers[i].priority}`);
				}
			}
		}

		SendPriority();
	}

	async function SendPriority() {
		if (dev) {
			return;
		}
		const res = await fetch(`/api/priority`, {
			method: 'POST',
			body: JSON.stringify({
				piority: $priority
			}),
			headers: {
				'Content-Type': 'application/json'
			}
		});
		console.log(`SendPriority: ${JSON.stringify($priority)}`);
	}
</script>

<svelte:head>
	<link
		href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
		rel="stylesheet"
		integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
		crossorigin="anonymous"
	/>
	<script
		src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
		crossorigin="anonymous"
	></script>
</svelte:head>

{#if start}
	<div class="container-fluid text-center mb-1">
		<div class="row bg-secondary p-1">
			<div class="col align-items-center">
				<button class="button" on:click={StopHeat}>STOP</button>
			</div>
		</div>
	</div>

	<ul>
		{#each Array($priority.surfersCount) as _, id}
			<li style="--height:{setup_height}vh">
				{#if $priority.surfers[id].priority == 'P'}
					<div
						class="priority"
						id="p"
						on:click={() => ChangePriority(id)}
						on:keypress={() => ChangePriority(id)}
						role="button"
						tabindex="-1"
					>
						{$priority.surfers[id].priority}
					</div>
				{:else}
					<div
						class="priority"
						id="n"
						on:click={() => ChangePriority(id)}
						on:keypress={() => ChangePriority(id)}
						role="button"
						tabindex="-1"
					>
						{$priority.surfers[id].priority}
					</div>
				{/if}
				<div class="color" style:background-color={$priority.surfers[id].color}>
					{$priority.surfers[id].name}
				</div>
			</li>
		{/each}
	</ul>
{:else}
	<div class="container-fluid text-center mb-1">
		<div class="row bg-secondary p-1">
			<div class="col align-items-center">
				<button class="btn btn-success btn-sm" on:click={StartHeat}>START</button>
			</div>
		</div>
	</div>

	<!-- <div class="container-fluid text-center"></div> -->

	<div class="container-fluid text-center">
		<div class="row row-cols-auto justify-content-between align-content-center bg-light mb-1">
			<div class="col align-self-center">
				<div class="btn-toolbar btn-group-sm" role="toolbar">
					<button class="btn btn-primary" on:click={AddSurfer}>+</button>
					<button class="btn btn-outline-black disabled">{$priority.surfersCount}</button>
					<button class="btn btn-primary" on:click={RemSurfer}>-</button>
				</div>
			</div>
			<div class="col align-self-center mt-1">
				<div class="row row-cols-auto justify-content- align-content-center bg-light mb-1">
					<div class="col align-self-center">
						<div class="input-group">
							<span class="input-group-text bg-info">Round</span>
							<select
								class="form-select form-select-sm"
								name="round"
								id="round"
								bind:value={$priority.round.name}
							>
								{#each $rounds as round}
									<option value={round}>{round}</option>
								{/each}
							</select>
						</div>
					</div>
					<div class="col align-self-center">
						<div class="input-group">
							<span class="input-group-text bg-info">Category</span>
							<select
								class="form-select form-select-sm"
								name="cetegory"
								id="category"
								bind:value={$priority.round.category}
							>
								{#each $categories as category}
									<option value={category}>{category}</option>
								{/each}
							</select>
						</div>
					</div>
					<div class="col align-self-center">
						<div class="input-group">
							<span class="input-group-text bg-info">Heat</span>
							<input
								type="number"
								class="form-control"
								min="1"
								max="999"
								size="3"
								bind:value={$priority.round.heat}
							/>
						</div>
					</div>
				</div>
			</div>
			<div class="col align-self-center">
				<button class="btn btn-danger btn-sm" on:click={ResetLocalCache}>Reset</button>
			</div>
		</div>
	</div>

	<table class="table table-striped table-borderless table-sm">
		<thead>
			<tr class="table-primary">
				<td> Name </td>
				<td> Color </td>
			</tr>
		</thead>
		<tbody class="table-group-divider">
			{#each Array($priority.surfersCount) as _, id}
				<tr class="table-light">
					<td
						><input
							class="input"
							type="text"
							size="30"
							bind:value={$priority.surfers[id].name}
						/></td
					>
					<td>
						<div class="select">
							<select
								name="color{id}"
								{id}
								bind:value={$priority.surfers[id].color}
								style="background-color: {$priority.surfers[id].color};"
							>
								{#each $colors as color}
									<option value={color} style="background-color: {color}">{color}</option>
								{/each}
							</select>
						</div>
					</td>
				</tr>
			{:else}
				<tr>
					<th />
					<td />
				</tr>
			{/each}
		</tbody>
	</table>
{/if}

<style>
	:global(body) {
		/* overflow-y: hidden; */
		overflow-x: hidden;
		margin: 0.2vmin;
		align-content: center;
		justify-content: center;
	}

	ul {
		margin: 0;
		padding: 0;
	}

	li {
		display: flex;
		flex-direction: row;
		margin-top: 0.2vh;
		margin-bottom: 0.2vh;
		overflow: hidden;
		height: var(--height);
	}

	.priority {
		text-align: center;
		align-self: center;
		min-height: var(--height);
		min-width: var(--height);
		margin-right: 0.2vw;
		background-color: gray;
	}

	.priority#p {
		font-size: 16vmin;
		background-color: lightgray;
		height: 100%;
	}

	.priority#n {
		font-size: 14vmin;
		height: 100%;
	}

	.color {
		display: flex;
		width: 100vw;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
</style>
