<template>
    <n-form
        :model="userModel"
        :rules="rules"
        label-placement="left"
        require-mark-placement="right-hanging"
        label-width="auto"
        @submit.prevent="$emit('submit')"
    >
        <n-form-item label="Benutzername" path="username">
            <n-input 
                v-model:value="userModel.username"
            />
        </n-form-item>

        <n-form-item label="Ist Admin?" path="is_admin">
            <n-checkbox v-model:checked="userModel.is_admin" />
        </n-form-item>

        <n-form-item label="Passwort" path="password">
            <n-input 
                type="password"
                show-password-on="mouseclick"
                placeholder="Passwort"
                v-model:value="userModel.password"
                @input="handlePasswordInput"
            />
        </n-form-item>

        <n-form-item label="Password wiederholen" path="password_repeat" ref="passwordRepeatRef">
            <n-input 
                type="password"
                :disabled="!userModel.password"
                show-password-on="mouseclick"
                placeholder="Passwort wiederholen"
                v-model:value="userModel.password_repeat"
            />
        </n-form-item>
    </n-form>
    <n-button
    @click="validate"
    >
        validate
    </n-button>
    <div>
        {{ userModel }}
    </div>
</template>

<script setup>
import { router } from '@inertiajs/vue3';
import { reactive, ref } from 'vue'

const props = defineProps(['userModel'])
const emit = defineEmits(['validateUsername'])

const passwordRepeatRef = ref(null)

const rules = {
    username: [{
        required: true,
        message: "Benutzername ist erforderlich",
    }],
    password: [{
        required: true,
        message: "Passwort ist erforderlich",
    }],
    password_repeat: [{
        required: true,
        message: "Wiederholtes Passwort ist erforderlich",
        trigger: ["input", "blur"],
    },{
        validator: passwordStartsWith,
        message: "Passwörter stimmen nicht überein",
        trigger: "input",
    },{
        validator: passwordSame,
        message: "Passwörter stimmen nicht überein",
        trigger: ["blur", "password-input"],
    }]
}

function passwordStartsWith(rule, value) {
    return !!props.userModel.password && props.userModel.password.startsWith(value) && props.userModel.password.length >= value.length;
}

function passwordSame(rule, value) {
    return value === props.userModel.password;
}

function usernameUnique(rule, value) {
}

function validate() {
    console.log("vue validate")

    router.post('/users?validate=true', {
        username: props.userModel.username,
        is_admin: props.userModel.is_admin,
        password: props.userModel.password,
        password_repeat: props.userModel.password_repeat,
    } )
}

function handlePasswordInput() {
    if(props.userModel.password_repeat) {
        passwordRepeatRef.value?.validate({ trigger: "password-input" })
    }
}
</script>