<script lang="ts">
	import type { AppointmentInputs, AppointmentList, WeekdayAppointment } from '$lib/dbdata';
	import CreatorBaseInputs from '$lib/modules/CreatorBaseInputs.svelte';
	import CreatorInputs from '$lib/modules/CreatorInputs.svelte';
	import CreatorTimeInputs from '$lib/modules/CreatorTimeInputs.svelte';
	import { onMount, tick } from 'svelte';

	let creatorInputs: AppointmentInputs[] = [{ name: '', type: 'text' }];
	let topic: string;
	let location: string;
	let selectedWeek: number = 202502;
	let previousWeek: number = selectedWeek;
	let duration: number = 15;
	let renderTimeSelection: boolean = false;

	$: console.log(appointmentList);

	let appointmentList: AppointmentList[] = [
		{
			week: selectedWeek,
			appointments: [
				{ name: 'Montag', active: false, times: [] },
				{ name: 'Dienstag', active: false, times: [] },
				{ name: 'Mittwoch', active: false, times: [] },
				{ name: 'Donnerstag', active: false, times: [] },
				{ name: 'Freitag', active: false, times: [] },
				{ name: 'Samstag', active: false, times: [] },
				{ name: 'Sonntag', active: false, times: [] }
			]
		}
	];

    async function changeWeek() {
		await tick();
        console.log("changed");
		console.log(selectedWeek);
		renderTimeSelection = false;

		/*
		const index = appointmentList.findIndex((entry) => entry.week === selectedWeek);
		if (index !== -1 && selectedWeekAppointments !== undefined) {
			appointmentList[index].appointments = selectedWeekAppointments;
			//console.log(appointmentList[index].appointments);
		}
		*/

        const ix = appointmentList.findIndex((entry) => entry.week === selectedWeek);
		if (ix === -1) {
            const tmp = {
                week: selectedWeek,
                appointments: [
                    { name: 'Montag', active: false, times: [] },
                    { name: 'Dienstag', active: false, times: [] },
                    { name: 'Mittwoch', active: false, times: [] },
                    { name: 'Donnerstag', active: false, times: [] },
                    { name: 'Freitag', active: false, times: [] },
                    { name: 'Samstag', active: false, times: [] },
                    { name: 'Sonntag', active: false, times: [] }
                ]
            }
            appointmentList = [... appointmentList, tmp];
			selectedWeekAppointments = tmp.appointments;
			console.log("not found");
        } else {
			console.log("test");
			console.log(appointmentList);
			selectedWeekAppointments = appointmentList.find(
				(entry) => entry.week === selectedWeek
			)?.appointments;
			console.log("found and send entry");
		}
		
        
		renderTimeSelection = true;
		previousWeek = selectedWeek;
		//setTimeout(() => renderTimeSelection = false, 2000);
    }

    let selectedWeekAppointments = appointmentList.find(
		(entry) => entry.week === selectedWeek
	)?.appointments;

	$: {
		// deactivate when changing weeks to prevent override
		const ix = appointmentList.findIndex((entry) => entry.week === selectedWeek);
		if (ix !== -1 && selectedWeekAppointments !== undefined && previousWeek === selectedWeek) {
			appointmentList[ix].appointments = selectedWeekAppointments;
			console.log("updated");
			console.log(appointmentList[ix].appointments);
			//renderTimeSelection = true;
			//setTimeout(() => renderTimeSelection = false, 2000);
		}
	}

	onMount(() => {
		// implement editor if query id param was detected
	});

	// get time slots before sending
</script>

<h3 class="center-align top-padding bottom-padding">Termine</h3>

<fieldset>
	<CreatorBaseInputs changeWeek={changeWeek} bind:topic bind:location bind:selectedWeek bind:duration />

	{#if selectedWeekAppointments}
		{#key renderTimeSelection}
			<CreatorTimeInputs bind:weekdays={selectedWeekAppointments} bind:selectedWeek />	
		{/key}
	{/if}

</fieldset>

<CreatorInputs bind:creatorInputs />

<div class="grid">
	<button class="top-margin s6 large red">Loeschen</button>
	<button class="top-margin s6 large">Speichern</button>
</div>

<style>
	fieldset {
		max-width: 90%;
		margin-inline: auto;
	}
</style>
