<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 {ref, toRaw} from "vue";
import type {GottesdienstGroup} from "@/models/models";
import {onKeyPress} from "@/composables/enter";

interface CreatePlanDialogProps extends DialogControls {
    onCreate: (GottesdienstGroup) => (Promise<any> | undefined),
    group?: GottesdienstGroup
}

onKeyPress("Enter", create)

const props = defineProps<CreatePlanDialogProps>()
let submitted = false;

const plan = ref<GottesdienstGroup>(props.group ?? {
    from: "",
    to: "",
    id: -1
})

async function create() {
    if(submitted) return;
    submitted = true
    await props.onCreate(toRaw(plan.value))
    props.onDismiss()
    submitted = false
}

</script>

<template>

    <Dialog class="dialog">
        <h3>Neuen Plan {{ plan.id == -1 ? "erstellen" : "bearbeiten" }}</h3>
        <Input class="input" v-model:value="plan.from" type="date" label="Von" focus/>
        <Input class="input" v-model:value="plan.to" type="date" label="Bis"/>
        <div class="buttons" style="display: flex; justify-content: end; margin-top: 20px;">
            <button @click="onDismiss">Abbrechen</button>
            <button @click="create">{{ plan.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>