<script>
	import { bind, onMount } from "svelte/internal";
	import icon from "$lib/images/hahn.svg"

	// base api url
	let backend_url = "http://localhost:5000/gates";

	let value_state_outer = "";
	let value_open_times_outer = "";
	let value_close_times_outer = "";

	let options_state = [
		{id: 1, text: "Schließen" },	// means "is open"
		{id: 2, text: "Öffnen" },
		{id: 3, text: "Schließt..." },
		{id: 4, text: "Öffnet..." },
	];
	let options_open = [
		{id: 1, text: "Sonnenaufgang"},
		{id: 2, text: "08:00"},
		{id: 3, text: "09:00"},
		{id: 4, text: "10:00"},
		{id: 5, text: "11:00"},
		{id: 6, text: "12:00"}
	];
	let options_close = [
		{id: 1, text: "Sonnenuntergang"},
		{id: 2, text: "Sonnenuntergang + 30min"},
		{id: 3, text: "16:00"},
		{id: 4, text: "16:30"},
		{id: 5, text: "17:00"},
		{id: 6, text: "17:30"},
		{id: 7, text: "18:00"},
		{id: 8, text: "18:30"},
		{id: 9, text: "19:00"},
		{id: 10, text: "19:30"},
		{id: 11, text: "20:00"},
		{id: 12, text: "20:30"},
		{id: 13, text: "21:00"},
		{id: 14, text: "21:30"},
		{id: 15, text: "22:00"},
	];

	function get_next_state(state) {
		if(state == 1) {
			return 2;
		}
		if(state == 2) {
			return 1;
		}
	}

	function handle_button_outer(event) {
		console.log(value_state_outer)
		for( var i = 0; i < options_state.length; i++) {
			if(options_state[i].text == value_state_outer) {
				fetch(backend_url + "/outer", {
					method: "PATCH",
					headers: {
						'Content-type': 'application/json'
					},
					body: JSON.stringify({
						outer_gate: {state: get_next_state(options_state[i].id)}
					})
				})
				.then(response => response.json())
				// .then(result => console.log(result))
				break;
			}
		}
	}

	function handle_open_times_outer() {
		alert(value_open_times_outer);
	}

	function handle_close_times_outer() {
		alert(value_close_times_outer);
	}

	function set_state_outer(index) {
		for( var i = 0; i < options_state.length; i++) {
			if(options_state[i].id == index) {
				value_state_outer = options_state[i].text;
				break;
			}
		}
	}

	function get_gates() {
		fetch(backend_url)
		.then(response => response.json())
		.then(data => {
			set_state_outer(data.outer_gate.state)
		}).catch(error => {
			console.log(error);
			return [];
		});
	}

	setInterval(() => {
		get_gates();
	}, 1000)

	onMount(async () => {
		get_gates();
	});
</script>

<svelte:head>
	<title>Chicken</title>
	<meta name="description" content="Chicken"/>
</svelte:head>

<section id='content_id' class='content'>
	<h1>Chicken</h1>
	<figure>
		<img src={icon} alt="Chicken" width=150/>
	</figure>
	<hr>
	<table>
		<tr>
			<td class="left">
				<h2>Außenklappe</h2>
			</td>
			<td>
				<input type="submit" enabled id="button_outer" value={value_state_outer} style="margin-left:55px;width:200px" on:click={(event) => handle_button_outer(event)}/>
			</td>
		</tr>
		<tr>
			<td class="left">Öffnen:</td>
			<td class="input">
				<select style="margin-left:55px;width:250px;" bind:value={value_open_times_outer} on:change={handle_open_times_outer}>
					{#each options_open as option}
						<option value={option}>{option.text}</option>
					{/each}
				</select>
			</td>
		</tr>
		<tr>
			<td class="left">Schließen:</td>
			<td class="input">
				<select style="margin-left:55px;width:250px;"  bind:value={value_close_times_outer} on:change={handle_close_times_outer}>
					{#each options_close as option}
						<option value={option}>{option.text}</option>
					{/each}
				</select>
			</td>
		</tr>
	</table>
	<hr>
</section>
