<template>
    <section class="max-w-xl m-auto">
        <van-nav-bar :title="t('password.title')">
            <template #left>
                <SvgIcon name="allow-left" class="w-7 h-7" @click="router.back" />
            </template>
        </van-nav-bar>
        <div class="m-4">
            <form @submit.prevent="onSubmit" ref="submitFormRef">
                <div class="space-y-12">
                    <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                        <div class="col-span-full">
                            <label for="password" class="block text-sm font-medium leading-6 text-gray-900">{{ t('password.old') }}</label>
                            <div class="mt-2">
                                <div
                                    class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-[#F96825] ">
                                    <input type="password" name="password" id="password"
                                        class="block flex-1 w-full border-0 bg-transparent py-1.5 pl-2 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
                                        placeholder="Enter your current password" v-model="formData.password" required
                                        :minlength="6" />
                                </div>
                            </div>
                        </div>
                        <div class="col-span-full">
                            <label for="password" class="block text-sm font-medium leading-6 text-gray-900">{{ t('password.new') }}</label>
                            <div class="mt-2">
                                <div
                                    class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-[#F96825] ">
                                    <input type="password" name="password" id="newPassword"
                                        class="block flex-1 w-full border-0 bg-transparent py-1.5 pl-2 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
                                        placeholder="Enter your New password" v-model="formData.newPassword"
                                        @input="clearValidation" required :minlength="6" ref="confirmInput" />
                                </div>
                            </div>
                        </div>
                        <div class="col-span-full">
                            <label for="password" class="block text-sm font-medium leading-6 text-gray-900">{{ t('password.confirm_p') }}</label>
                            <div class="mt-2">
                                <div
                                    class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-[#F96825] ">
                                    <input type="password" name="password" id="password2"
                                        class="block flex-1 w-full border-0 bg-transparent py-1.5 pl-2 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
                                        placeholder="Repeat New password" v-model="formData.newPassword2" required
                                        :minlength="6" />
                                </div>
                            </div>
                        </div>
                        <div class="col-span-full">
                            <span class="text-red-400 text-left text-st">{{ t('password.note') }}</span>
                        </div>
                    </div>
                </div>
                <div class="mt-6 flex items-center justify-end gap-x-6">
                    <button type="submit"
                        class="rounded-md w-full bg-[#F96825] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-[#F96825] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
                </div>
            </form>
        </div>
    </section>
    <Dialog ref="dialogRef" />
    <Success ref="successRef" />
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { updateUserPassword } from '@/api/user'
import Dialog from '@/components/Dialog.vue';
import Success from '@/components/Success.vue';
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const router = useRouter()
const dialogRef = ref()
const confirmInput = ref()
const successRef = ref()

const formData = ref({
    password: '',
    newPassword: '',
    newPassword2: ''
})

const clearValidation = () => {
    confirmInput.value.setCustomValidity(''); // Clear any previous error
    confirmInput.value.reportValidity(); // Clear the validation message
};


const onSubmit = async () => {
    if (formData.value.newPassword != formData.value.newPassword2) {
        confirmInput.value.setCustomValidity(t('password.not_match'));
        confirmInput.value.reportValidity();
        return
    }
    await submit()
}

const submit = async () => {
    const res = await updateUserPassword(formData.value) as any
    if (res.code === 0) {
        successRef.value.open()
    } else {
        const os = await dialogRef.value.open({
            type: 'warning',
            content: res.msg,
            confirmText: 'Confirm',
            showCancelButton: true
        })
    }
}
onMounted(() => {
})

</script>

<style scoped>
input:invalid {
    border-color: red;
}</style>