<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnRow from '../ui/VnRow.vue';
import FetchData from '../FetchData.vue';
import useNotify from 'src/composables/useNotify';
import VnInputPassword from 'src/components/common/VnInputPassword.vue';

const props = defineProps({
    submitFn: { type: Function, default: () => {} },
    askOldPass: { type: Boolean, default: false },
});
const emit = defineEmits(['onSubmit']);
const { t } = useI18n();
const { notify } = useNotify();

const form = ref();
const changePassDialog = ref();
const passwords = ref({ newPassword: null, repeatPassword: null });
const requirements = ref([]);
const isLoading = ref(false);

const validate = async () => {
    const { newPassword, repeatPassword, oldPassword } = passwords.value;

    if (!newPassword) {
        notify(t('You must enter a new password'), 'negative');
        return;
    }
    if (newPassword !== repeatPassword) {
        notify(t("Passwords don't match"), 'negative');
        return;
    }

    try {
        isLoading.value = true;
        await props.submitFn(newPassword, oldPassword);
        emit('onSubmit');
    } catch (e) {
        notify('errors.writeRequest', 'negative');
    } finally {
        changePassDialog.value.hide();
        isLoading.value = false;
    }
};

defineExpose({ show: () => changePassDialog.value.show() });
</script>
<template>
    <FetchData
        url="UserPasswords/findOne"
        auto-load
        @on-fetch="(data) => (requirements = data)"
    />
    <QDialog ref="changePassDialog">
        <QCard style="width: 350px">
            <QCardSection>
                <slot name="header">
                    <VnRow class="items-center" style="flex-direction: row">
                        <span class="text-h6" v-text="t('globals.changePass')" />
                        <QIcon
                            class="cursor-pointer"
                            name="close"
                            size="xs"
                            style="flex: 0"
                            v-close-popup
                        />
                    </VnRow>
                </slot>
            </QCardSection>
            <QForm ref="form">
                <QCardSection>
                    <VnInputPassword
                        v-if="props.askOldPass"
                        :label="t('Old password')"
                        v-model="passwords.oldPassword"
                        :required="true"
                        :toggle-visibility="true"
                        autofocus
                    />
                    <VnInputPassword
                        :label="t('New password')"
                        v-model="passwords.newPassword"
                        :required="true"
                        :toggle-visibility="true"
                        :info="
                            t('passwordRequirements', {
                                length: requirements.length,
                                nAlpha: requirements.nAlpha,
                                nUpper: requirements.nUpper,
                                nDigits: requirements.nDigits,
                                nPunct: requirements.nPunct,
                            })
                        "
                        autofocus
                    />

                    <VnInputPassword
                        :label="t('Repeat password')"
                        v-model="passwords.repeatPassword"
                        :toggle-visibility="true"
                    />
                </QCardSection>
            </QForm>
            <QCardActions>
                <slot name="actions">
                    <QBtn
                        :disabled="isLoading"
                        :loading="isLoading"
                        :label="t('globals.cancel')"
                        class="q-ml-sm"
                        color="primary"
                        flat
                        type="reset"
                        v-close-popup
                    />
                    <QBtn
                        :disabled="isLoading"
                        :loading="isLoading"
                        :label="t('globals.confirm')"
                        color="primary"
                        @click="validate"
                    />
                </slot>
            </QCardActions>
        </QCard>
    </QDialog>
</template>

<i18n>
es:
    New password: Nueva contraseña
    Repeat password: Repetir contraseña
    You must enter a new password: Debes introducir la nueva contraseña
    Passwords don't match: Las contraseñas no coinciden
</i18n>
