<script lang="ts">
	import { m } from '$lib/paraglide/messages';
	import { CardContainer, InputField, Toggle } from '$lib/components';
	import { settings, status } from '$lib/stores';
	import { onDestroy } from 'svelte';
	import {
		setCustomText,
		setLEDcolor,
		turnOffLeds,
		restartClock,
		forceFullRefresh,
		generateRandomColor,
		flashFrontlight,
		turnOnFrontlight,
		turnOffFrontlight
	} from '$lib/clockControl';
	import type { LedStatus } from '$lib/types';

	let ledStatus = $state<LedStatus[]>([
		{ hex: '#000000' },
		{ hex: '#000000' },
		{ hex: '#000000' },
		{ hex: '#000000' }
	]);
	let customText = $state('');
	let keepLedsSameColor = $state(false);

	const checkSyncLeds = (e: Event) => {
		if (keepLedsSameColor && e.target instanceof HTMLInputElement) {
			const targetValue = e.target.value;

			ledStatus.forEach((element, i) => {
				if (ledStatus[i].hex != targetValue) {
					ledStatus[i].hex = targetValue;
				}
			});
		}
	};

	let firstLedDataSubscription = () => {};

	firstLedDataSubscription = status.subscribe(async (val) => {
		if (val && val.leds) {
			ledStatus = val.leds.map((obj) => ({ ['hex']: obj['hex'] }));

			for (let led of ledStatus) {
				if (led['hex'] == '#000000') {
					led['hex'] = generateRandomColor();
				}
			}

			firstLedDataSubscription();
		}
	});

	onDestroy(firstLedDataSubscription);
</script>

<CardContainer title={m['section.control.title']()}>
	<div class="grid gap-4">
		<div class="form-control">
			<label class="label" for="customText">
				<span class="label-text">{m['section.control.text']()}</span>
			</label>
			<div class="flex flex-col gap-2 md:flex-row">
				<InputField
					id="customText"
					maxLength="7"
					bind:value={customText}
					placeholder={m['section.control.text']()}
					style="text-transform: uppercase;"
				/>
				<button class="btn btn-primary" onclick={() => setCustomText(customText)}
					>{m['section.control.showText']()}</button
				>
			</div>
		</div>

		<div class="">
			<h3 class="mb-2 font-medium">{m['section.control.ledColor']()}</h3>
			<div class="flex flex-col justify-between md:flex-row">
				<div class="mb-4 flex flex-col flex-wrap gap-2">
					<div class="flex gap-2">
						{#if ledStatus.length > 0}
							{#each ledStatus as led (led)}
								<input
									type="color"
									class="btn btn-square"
									bind:value={led.hex}
									onchange={checkSyncLeds}
								/>
							{/each}
						{/if}
					</div>
					<div class="flex gap-2">
						<Toggle
							label={m['sections.control.keepSameColor']()}
							bind:checked={keepLedsSameColor}
						/>
					</div>
				</div>
				<div class="flex gap-2">
					<button class="btn btn-secondary" onclick={turnOffLeds}
						>{m['section.control.turnOff']()}</button
					>
					<button class="btn btn-primary" onclick={() => setLEDcolor(ledStatus)}
						>{m['section.control.setColor']()}</button
					>
				</div>
			</div>
		</div>

		{#if $settings.hasFrontlight && !$settings.flDisable}
			<div>
				<h3 class="mb-2 font-medium">{m['section.control.frontlight']()}</h3>
				<div class="flex justify-end gap-2">
					<button class="btn btn-secondary" onclick={() => turnOnFrontlight()}
						>{m['section.control.turnOn']()}</button
					>
					<button class="btn btn-primary" onclick={() => turnOffFrontlight()}
						>{m['section.control.turnOff']()}</button
					>
					<button class="btn btn-accent" onclick={() => flashFrontlight()}
						>{m['section.control.flashFrontlight']()}</button
					>
				</div>
			</div>
		{/if}

		<div>
			<div class="flex gap-2 md:justify-end">
				<button class="btn btn-error" onclick={restartClock}>{m['button.restart']()}</button>
				<button class="btn" onclick={forceFullRefresh}>{m['button.forceFullRefresh']()}</button>
			</div>
		</div>
	</div>
</CardContainer>
