<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 {onKeyPress} from "@/composables/enter";
import {API} from "@/services/api";
import {Dialogs} from "@/services/DialogService";
import UpdatePasswordDialog from "@/components/dialog/UpdatePasswordDialog.vue";
interface CreateMinistrantDialogProps extends DialogControls {
    onCreate: (any) => (Promise<any> | undefined),
    onDelete: (id) => (Promise<any> | undefined),
    ministrant?: any
}

onKeyPress("Enter", create)

const props = defineProps<CreateMinistrantDialogProps>()

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

let submitted = false

const ministrant = ref(props.ministrant ?? {
    id: -1,
    username: "",
    firstname: "",
    lastname: "",
    birthday: "",
    privileges: "",
})

async function create(){
    if(submitted) return;
    submitted = true
    const { id, username, firstname, lastname, privileges, birthday } = toRaw(ministrant.value)
    await props.onCreate({
        id, username, firstname, lastname, privileges,
        birthday: new Date(birthday)
    })
    props.onDismiss()
    submitted = false
}

async function deleteMinistrant() {
    if(submitted) return;
    submitted = true
    const mini = ministrant.value
    const shouldDelete = confirm("Möchtest du wirklich " + mini.firstname + " " + mini.lastname + " löschen? Der Ministrant und alle Eintragungen können nicht wiederhergestellt werden!")

    if(!shouldDelete) return;

    await props.onDelete(mini.id);
    props.onDismiss()
    submitted = false
}

async function resetPassword(username: string) {
    const result = await API.resetPassword(username)
    alert("Neues Passwort für " + username + "\n\n" + result.password)
    console.log(result)
}

async function updatePassword(username: string) {
    Dialogs.createDialog(
        UpdatePasswordDialog,
        {
            onDismiss(){},
            onNegative(){},
            onPositive(){},
        },
        {
            async onUpdated(newPassword: string){
                await API.updatePassword(username, newPassword)
            },
            username
        }
    )
}

</script>

<template>

    <Dialog class="dialog">
        <h3>Ministrant {{ ministrant.id == -1 ? "erstellen" : "bearbeiten"}}</h3>
        <Input class="input" v-model:value="ministrant.username" label="Nutzername" focus/>
        <Input class="input" v-model:value="ministrant.firstname" label="Vorname"/>
        <Input class="input" v-model:value="ministrant.lastname" label="Nachname"/>
        <Input class="input" v-model:value="ministrant.birthday" type="date" label="Geburtstag"/>
        <Input class="input" v-model:value="ministrant.privileges" label="Privilegien"/>

        <div class="actions" v-if="ministrant.id != -1">
<!--            <button @click="resetPassword(ministrant.username)"><i>lock_reset</i>Passwort zurücksetzen-->
<!--            </button>-->
            <button @click="updatePassword(ministrant.username)"><i>lock_reset</i>Passwort ändern
            </button>
            <button class="red" @click="deleteMinistrant()"><i>delete</i>Entfernen</button>
        </div>

        <div class="buttons" style="display: flex; justify-content: end; margin-top: 20px;">
            <button @click="onDismiss">Abbrechen</button>
            <button @click="create">{{ ministrant.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>