<script lang="ts">
	import { api_host } from '$lib';
	import type { Appointment, AppointmentDateTimes } from '$lib/dbdata';
	import AppointmentConfirmDialog from '$lib/modules/AppointmentConfirmDialog.svelte';
    import AppointmentInfo from '$lib/modules/AppointmentInfo.svelte';
    import DatePicker from '$lib/modules/DatePicker.svelte';
	import DateTimes from '$lib/modules/DateTimes.svelte';
	import { onMount } from 'svelte';

    let title: string = "Appointment";
    let location: string = "Somewhere";
    let description: string = "Description ...";

    let selectedDate: Date = new Date();
    let activateModal: boolean = false;
    let appointmentDateTimes: AppointmentDateTimes[] = [

    ];

    async function getAppointmentInfo(appointmentId: string) {
        const response = await fetch(`${api_host}/api/schedule?appointmentId=${appointmentId}`, {
                method: "GET",
                headers: {
                    "Content-Type": "application/json"
                }
            })
        const js: Appointment = await response.json();
        appointmentDateTimes = js.times;
        title = js.title;
        description = js.description;
        location = js.place;
    }

    onMount(async () => {
        await getAppointmentInfo("6799f8a6b9285925c01491e0");
    });

</script>
  
<style>
    .w-80 {
        max-width: 600px;
    }

    .inline-margin {
        margin-inline: auto;
    }
</style>

<DatePicker bind:appointmentDateTimes bind:selectedDate />

<div class="top-margin w-80 inline-margin"> 
    <AppointmentInfo bind:title bind:description bind:location />
    {#key selectedDate}
        <DateTimes bind:activateModal bind:selectedDate bind:availableTimes={appointmentDateTimes} />    
    {/key}
</div>

<AppointmentConfirmDialog bind:active={activateModal} bind:date={selectedDate} bind:title bind:description bind:location />