<script lang="ts">
	import type { AppointmentInputs, DynamicJson } from "$lib/dbdata";
	import { extractTime } from "$lib/funcs";
	import AppointmentInfo from "./AppointmentInfo.svelte";
	import AppointmentRegisterInputs from "./AppointmentRegisterInputs.svelte";

  export let active: boolean;

  export let title: string = "Title";
  export let location: string = "Somewhere";
  export let description: string = "Description ...";
  export let date: Date = new Date();
  export let dynamicInputs: DynamicJson[] = [];
  let time: string = "00:00";

  $: {
    time = extractTime(date);
  }

  function closeModal() {
    active = false;
  }

  function submitModal() {
    // send to backend
  }
</script>

<dialog class="max {active ? 'active': ''}">
    <div class="center medium-padding">
      <AppointmentInfo bind:title bind:location bind:description
          bind:time bind:date isConfirmation={true} />

      <AppointmentRegisterInputs bind:dynamicInputs />

      <nav class="right-align">
        <button class="border" on:click={closeModal}>Cancel</button>
        <button>Confirm</button>
      </nav>
  </div>
</dialog>
  
