<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: (arg0: Gottesdienst) => (Promise<any> | undefined),
    gottesdienst?: Gottesdienst,
    planId: number,
    onDelete?: () => void
}

onKeyPress("Enter", create)

const props = defineProps<CreateGottesdienstDialogProps>()

const godi = ref(formatGottesdienst(props.gottesdienst))

const date = ref(props.gottesdienst ? formatDateString(props.gottesdienst.date) : "")
const time = ref(props.gottesdienst ? formatTimeString(props.gottesdienst.date) : "")

let submitted = false

function formatGottesdienst(gottesdienst: Gottesdienst) {
    return gottesdienst ? {
        ...gottesdienst,
        attendance: formatTimeString(gottesdienst.attendance)
    } : {
        planId: props.planId,
        date: "",
        attendance: "",
        name: "",
        id: -1
    }
}

function formatDateString(date: Date) {
    return (new Date(date)).toISOString().split('T')[0];
}

function formatTimeString(date: Date) {
    return (new Date(date)).toTimeString().slice(0, 5);
}


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" date-format="string" type="date" label="Datum"/>
        <Input class="input" v-model:value="time" date-format="string" type="time" label="Um"/>
        <Input class="input" v-model:value="godi.attendance" type="time" label="Anwesenheit"/>
        <div class="buttons" style="display: flex; justify-content: space-between; margin-top: 20px;">
            <button v-if="godi.id != -1 && onDelete" class="red" @click="onDelete(); onDismiss()"><i class="icon">delete</i> Löschen</button>
            <div style="display: flex; gap: 8px; margin-left: auto;">
                <button @click="onDismiss">Abbrechen</button>
                <button @click="create">{{ godi?.id == -1 ? "Erstellen" : "Speichern"}}</button>
            </div>
        </div>
    </Dialog>

</template>

<style scoped lang="less">

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

    h3{
        margin-bottom: 30px;
    }

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

</style>