<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

import axios from 'axios';
import { useDialogPluginComponent } from 'quasar';

import useNotify from 'src/composables/useNotify';

import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import FetchData from 'src/components/FetchData.vue';

const { dialogRef } = useDialogPluginComponent();
const { notify } = useNotify();
const { t } = useI18n();

const $props = defineProps({
    id: {
        type: String,
        required: true,
    },
    promise: {
        type: Function,
        required: true,
    },
});
const userPasswords = ref({});

const closeButton = ref(null);
const isLoading = ref(false);
const newPassword = ref('');
const requestPassword = ref('');

const onSubmit = async () => {
    isLoading.value = true;

    if (newPassword.value !== requestPassword.value) {
        notify(t("Passwords don't match"), 'negative');
        isLoading.value = false;
        return;
    }

    const payload = {
        newPassword: newPassword.value,
    };
    try {
        await axios.patch(`Clients/${$props.id}/setPassword`, payload);
    } catch (error) {
        notify('errors.create', 'negative');
    } finally {
        isLoading.value = false;
        if (closeButton.value) closeButton.value.click();
    }
};
</script>

<template>
    <QDialog ref="dialogRef">
        <FetchData
            @on-fetch="(data) => (userPasswords = data[0])"
            auto-load
            url="UserPasswords"
        />
        <QCard class="q-pa-lg">
            <QCardSection>
                <QForm @submit.prevent="onSubmit">
                    <span
                        ref="closeButton"
                        class="row justify-end close-icon"
                        v-close-popup
                    >
                        <QIcon name="close" size="sm" />
                    </span>

                    <VnRow class="row q-gutter-md q-mb-md" style="flex-direction: column">
                        <div class="col">
                            <VnInput
                                :label="t('New password')"
                                clearable
                                v-model="newPassword"
                                type="password"
                            >
                                <template #append>
                                    <QIcon name="info" class="cursor-info">
                                        <QTooltip>
                                            {{
                                                t('customer.card.passwordRequirements', {
                                                    ...userPasswords,
                                                })
                                            }}
                                        </QTooltip>
                                    </QIcon>
                                </template>
                            </VnInput>
                        </div>
                        <div class="col">
                            <VnInput
                                :label="t('Request password')"
                                clearable
                                v-model="requestPassword"
                                type="password"
                            />
                        </div>
                    </VnRow>

                    <div class="q-mt-lg row justify-end">
                        <QBtn
                            :disabled="isLoading"
                            :label="t('globals.cancel')"
                            :loading="isLoading"
                            class="q-ml-sm"
                            color="primary"
                            flat
                            type="reset"
                            v-close-popup
                        />
                        <QBtn
                            :disabled="isLoading"
                            :label="t('Change password')"
                            :loading="isLoading"
                            color="primary"
                            type="submit"
                        />
                    </div>
                </QForm>
            </QCardSection>
        </QCard>
    </QDialog>
</template>

<i18n>
es:
    New password: Nueva contraseña
    Request password: Repetir contraseña
    Change password: Cambiar contraseña
    Passwords don't match: Las contraseñas no coinciden
</i18n>
