<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';

	let creatorInputs: AppointmentInputs[] = [{ name: '', type: 'text' }];
	let topic: string;
	let location: string;
	let selectedWeek: number = 202502;
	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: [] }
			]
		}
	];

    function changeWeek() {
        console.log("changed");
		renderTimeSelection = false;

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

        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 = appointmentList.find(
            (entry) => entry.week === selectedWeek
        )?.appointments;
		renderTimeSelection = true;
		//setTimeout(() => renderTimeSelection = false, 2000);
    }

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

	$: {
		const ix = appointmentList.findIndex((entry) => entry.week === selectedWeek);
		if (ix !== -1 && selectedWeekAppointments !== undefined) {
			appointmentList[ix].appointments = selectedWeekAppointments;
			//renderTimeSelection = true;
			//setTimeout(() => renderTimeSelection = false, 2000);
		}
	}

	// 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>
