<script setup lang="ts">

import Dialog from "@/components/dialog/Dialog.vue";
import type {DialogControls} from "@/components/dialog/dialog";
import Input from "@/components/Input.vue";
import {onMounted, ref, toRaw} from "vue";
import type {Gottesdienst, GottesdienstGroup} from "@/models/models";
import {onKeyPress} from "@/composables/enter";
interface CreateGottesdienstDialogProps extends DialogControls {
    onCreate: (Gottesdienst) => (Promise<any> | undefined),
    godi?: Gottesdienst,
    planId: number
}

onKeyPress("Enter", create)

const props = defineProps<CreateGottesdienstDialogProps>()

const date = ref("")
const time = ref("")

const godi = ref(props.godi ?? {
    planId: props.planId,
    date: "",
    attendance: "",
    name: "",
    id: -1
})

let submitted = false


async function create(){
    if(submitted) return;
    submitted = true
    await props.onCreate({
        planId: godi.value.planId,
        date: new Date(date.value + "T" + time.value),
        attendance: new Date(date.value + "T" + godi.value.attendance),
        name: godi.value.name,
        id: godi.value.id
    })
    props.onDismiss()
    submitted = false
}

</script>

<template>

    <Dialog class="dialog">
        <h3>Gottesdienst {{ godi.id == -1 ? "erstellen" : "bearbeiten"}}</h3>
        <Input class="input" v-model:value="godi.name" label="Name" focus/>
        <Input class="input" v-model:value="date" type="date" label="Datum"/>
        <Input class="input" v-model:value="time" type="time" label="Um"/>
        <Input class="input" v-model:value="godi.attendance" type="time" label="Anwesenheit"/>
        <div class="buttons" style="display: flex; justify-content: end; margin-top: 20px;">
            <button @click="onDismiss">Abbrechen</button>
            <button @click="create">{{ godi?.id == -1 ? "Erstellen" : "Speichern"}}</button>
        </div>
    </Dialog>

</template>

<style scoped lang="less">

.dialog {
    display: flex;
    flex-direction: column;
    width: 500px;

    h3{
        margin-bottom: 30px;
    }

    .input {
        margin-bottom: 16px;
    }
}

</style>