<script setup>
import { PasswordInput } from '@/components';
import { computed, watch, ref } from 'vue';
import { useI18n } from 'vue-i18n';

const props = defineProps({
    modelValue: {
        type: Object,
        default: undefined
    }
});

const emit = defineEmits(['update:modelValue']);

const { t } = useI18n();

const password1 = ref("");
const password2 = ref("");

// Überprüft, ob Passwort und Wiederholungspasswort identisch sind
const passwordMatch = computed(() => {
    return password1.value === password2.value;
});

watch(() => props.modelValue, (newVal) => {
    if ( newVal.password == "" ) {
        password1.value = "";
        password2.value = "";
    }
});

// Überprüft, ob Passwort lang genug ist
const passwordLength = computed(() => {
    return password1.value.length >= 8;
});

// Überprüft, ob das Passwort ein Sonderzeichen enthält
const passwordSpecialChar = computed(() => {
    const specialCharRegex = /[!@#$%^&*()_+\-=\[\]{});':"`\\|,.<>\/?$§€°~`´]/;
    return specialCharRegex.test(password1.value);
});

// Überprüft, ob das Passwort Zahlen enthält
const passwordNumbers = computed(() => {
    const numbersRegex = /[0-9]/;
    return numbersRegex.test(password1.value);
});

// Überprüft ob das Passwort Groß- und Kleinschreibung enthält
const passwordUpperLower = computed(() => {
    const upperLowerRegex = /^(?=.*[A-Z])(?=.*[a-z]).+$/;
    return upperLowerRegex.test(password1.value);
});

// Wahr, falls das Passwort alle Eigenschaften für ein sicheres Passwort erfüllt
const isPasswordValidArray = computed(() => [
    { rule: passwordLength, text: t("passwordRequirements.passwordLength", 8) },
    { rule: passwordSpecialChar, text: t("passwordRequirements.passwordSpecialChar") },
    { rule: passwordNumbers, text: t("passwordRequirements.passwordNumbers") },
    { rule: passwordUpperLower, text: t("passwordRequirements.passwordUpperLower") },
    { rule: passwordMatch, text: t("passwordRequirements.passwordMatch") },
]);

watch(password1, emitPassword);
watch(password2, emitPassword);

// emit password object with password and valid whenever passwort1 or 2 changes
function emitPassword() {
    emit('update:modelValue', {
        password: password1.value,
        valid: isPasswordValidArray.value.every(({rule}) => rule.value)
    });
};

// Nimmt eine Funktion entgegen,
// falls diese wahr auswertet, wird ein Häckchen Emoji zurückgegeben,
// falls diese falsch auswertet, wird ein Kreuz Emoji zurückgegeben
function returnEmoji(fn) {
    return fn ? '✅' : '❌';
};

</script>
<template>
    <!-- Eingabefeld für Passwort -->
    <PasswordInput
        v-model="password1"
        :label="$t('form.password')"
    />

    <!-- Eingabefeld für Passwortwiederholung -->
    <PasswordInput
        v-model="password2"
        :label="$t('message.repeatPassword')"
    />

    <!-- Liste mit allen Anforderungen für ein sicheres Passwort -->
    <!-- Falls Anforderung erfüllt, wird ein Häckchen Emoji vor der Anforderung angezeigt, -->
    <!-- falls nicht, ein Kreuz -->
    <ul>
        <li
            v-for="(rule, index) in isPasswordValidArray"
            :key="index"
            class="d-flex"
        >
            {{ returnEmoji(rule.rule.value) }} {{ rule.text }}
        </li>
    </ul>
</template>
<style>

</style>

