<script lang="ts">
	import type { AppointmentDateTimes } from "$lib/dbdata";
	import { extractTime, isSameDate } from "$lib/funcs";
	import moment from "moment";
	import { onMount } from "svelte";
	import AppointmentConfirmDialog from "./AppointmentConfirmDialog.svelte";

    export let availableTimes: AppointmentDateTimes[] = [];
    export let selectedDate: Date = new Date();

    export let activateModal: boolean = false;

    function redirectToBooking(date: Date) {
        selectedDate = date;
        activateModal = true;
    }
</script>


<h4 class="center-align top-margin">Times</h4>

<article>
    {#each availableTimes as time}
        {#if isSameDate(time.date, selectedDate)}
            <button on:click={() => redirectToBooking(time.date)} 
                class="responsive wave border bottom-margin">{extractTime(time.date)}</button>
        {/if}
    {/each}
</article>
