<script setup>
import axios from '@axios';
import {
    requiredValidator
} from '@validators';
const errors = ref({
    new_password: undefined,
    confirm_passowrd: undefined,

})
const isTonalSnackbarVisible = ref(false)
const patientResponse = ref(false)
const isLoadingVisible = ref(false)
const passwordVForm = ref()
const isNewPasswordVisible = ref(false)
const isConfirmPasswordVisible = ref(false)
const newPassword = ref(null)
const confirmPassword = ref(null)

const matchPasswordsValidator = (value) => {
    if (value !== newPassword.value) {
        errors.confirm_passowrd = ['Passwords do not match'];
        return 'Passwords do not match';
    }
    return true;
}

const onSubmit = () => {
    passwordVForm.value?.validate().then(async ({ valid: isValid }) => {
        console.log('isValid ', isValid)
        if (isValid)
            await changePassword()
    })
}
const changePassword = async () => {
    isLoadingVisible.value = true;
    await axios.post('/api/change-password', {
        new_password: newPassword.value,

    }).then(r => {
        console.log("Change Password", r.data);
        isTonalSnackbarVisible.value = true;
        patientResponse.value = r.data.message;
        isLoadingVisible.value = false;
    }).catch(e => {
        console.log(e.response);
        const { errors: formErrors } = e.response.data.errors;
        errors.value = e.response.data.errors;
        isLoadingVisible.value = false;
        console.error("Error", e.response.data.errors)
    });
}

</script>

<template>
    <VSnackbar v-model="isTonalSnackbarVisible" :timeout="5000" location="top end" variant="flat" color="success">
        {{ patientResponse }}
    </VSnackbar>

    <VDialog v-model="isLoadingVisible" width="110" height="150" color="primary">
        <VCardText class="" style="color: white !important;">
            <div class="demo-space-x">
                <VProgressCircular :size="40" color="primary" indeterminate />
            </div>
        </VCardText>
    </VDialog>
    <VRow>
        <VCol cols="12">
            <VCard>
                <VCardText>
                    <VForm ref="passwordVForm" @submit.prevent="onSubmit">
                        <VCardText>
                            <VRow>
                                <VCol cols="12" md="6">
                                    <!-- 👉 new password -->
                                    <VTextField v-model="newPassword" :type="isNewPasswordVisible ? 'text' : 'password'"
                                        :append-inner-icon="isNewPasswordVisible ? 'bx-hide' : 'bx-show'"
                                        label="New Password" placeholder="············"
                                        @click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
                                        :rules="[requiredValidator]" :error-messages="errors.new_password" />
                                </VCol>

                                <VCol cols="12" md="6">
                                    <!-- 👉 confirm password -->
                                    <VTextField v-model="confirmPassword"
                                        :type="isConfirmPasswordVisible ? 'text' : 'password'"
                                        :append-inner-icon="isConfirmPasswordVisible ? 'bx-hide' : 'bx-show'"
                                        label="Re-enter Password" placeholder="············"
                                        @click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
                                        :rules="[requiredValidator, matchPasswordsValidator]"
                                        :error-messages="errors.confirm_passowrd" />
                                </VCol>
                            </VRow>
                        </VCardText>

                        <!-- 👉 Action Buttons -->
                        <VCardText class="d-flex flex-wrap gap-4">
                            <VBtn type="submit">Save changes</VBtn>

                            <!-- <VBtn type="reset" color="secondary" variant="tonal">
                                Reset
                            </VBtn> -->
                        </VCardText>
                    </VForm>
                </VCardText>
            </VCard>
        </VCol>
    </VRow>
</template>
