<script setup lang="ts">
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
import {
    CheckIcon,
    ExclamationTriangleIcon, InformationCircleIcon, QuestionMarkCircleIcon,
} from '@heroicons/vue/24/outline'
import { XMarkIcon } from '@heroicons/vue/24/solid';
import { ref, watch } from 'vue';
import InputText from '../InputText.vue';
import ButtonPrimary from '../ButtonPrimary.vue';
import { dispatchNotification } from '../Notification';

const props = defineProps({ open: Boolean });
const emits = defineEmits(['onClose']);
const open = ref(props.open)
const oldPassword = ref('');
const password = ref('');
const passwordConfirmation = ref('');
const isLoading = ref(false);

function close() {
    open.value = false;
    emits('onClose', false);
}

function showLoading() {
    isLoading.value = true;
}

function hideLoading() {
    isLoading.value = false;
}

function handleOnChangePassword() {
    if (oldPassword.value == '') {
        dispatchNotification({
            title: 'Peringatan',
            content: 'Password lama tidak boleh kosong',
            type: 'error',
        })
    } else if (password.value == '') {
        dispatchNotification({
            title: 'Peringatan',
            content: 'Password baru tidak boleh kosong',
            type: 'error',
        })
    } else if (passwordConfirmation.value == '') {
        dispatchNotification({
            title: 'Peringatan',
            content: 'Konfirmasi password tidak boleh kosong',
            type: 'error',
        })
    } else if (password.value != passwordConfirmation.value) {
        dispatchNotification({
            title: 'Peringatan',
            content: 'Password baru dan konfirmasi password tidak sama',
            type: 'error',
        })
    } else if (oldPassword.value == password.value) {
        dispatchNotification({
            title: 'Peringatan',
            content: 'Password baru tidak boleh sama dengan password lama',
            type: 'error',
        })
    } else {
        showLoading();
        setTimeout(() => {
            hideLoading();
            close();
        }, 15000);
    }

}

watch(() => props.open, (value) => {
    open.value = value;
});

</script>

<template>
    <!-- Log Out Dialog -->
    <TransitionRoot as="template" :show="open">
        <Dialog as="div" class="relative z-20" @close="close">
            <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
                leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
                <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
            </TransitionChild>

            <div class="fixed inset-0 z-10 overflow-y-auto">
                <div class="flex items-center justify-center min-h-full p-4 text-center sm:p-0">
                    <TransitionChild as="template" enter="ease-out duration-300"
                        enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                        enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
                        leave-from="opacity-100 translate-y-0 sm:scale-100"
                        leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                        <DialogPanel
                            class="relative p-4 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:max-w-sm sm:p-6 sm:my-8 sm:w-full">
                            <form @submit.prevent="handleOnChangePassword" class="flex flex-col">
                                <div class="absolute top-0 right-0 pt-4 pr-4 ">
                                    <button type="button"
                                        class="text-gray-400 bg-white rounded-md hover:text-gray-500 focus:outline-none focus:ring-0"
                                        @click="close">
                                        <span class="sr-only">Close</span>
                                        <XMarkIcon class="w-6 h-6" aria-hidden="true" />
                                    </button>
                                </div>
                                <div>
                                    <DialogTitle as="h4" class="font-medium leading-6 text-gray-900 text-md">
                                        Ubah Password
                                    </DialogTitle>
                                    <div class="flex flex-col mt-2">
                                        <label for="password" class="mb-2 text-xs font-medium text-dark">
                                            Password Lama
                                        </label>
                                        <InputText type="password" class-name="mb-3 text-sm placeholder:text-sm"
                                            placeholder="Masukan Password lama" :value="oldPassword"
                                            @update:value="oldPassword = $event" />

                                        <label for="password" class="mb-2 text-xs font-medium text-dark">
                                            Password Baru
                                        </label>
                                        <InputText class-name="mb-3 text-sm placeholder:text-sm" type="password"
                                            placeholder="Masukan Password baru" :value="password"
                                            @update:value="password = $event" />

                                        <label for="password" class="mb-2 text-xs font-medium text-dark">
                                            Konfirmasi Password
                                        </label>
                                        <InputText class-name="mb-3 text-sm placeholder:text-sm" type="password"
                                            placeholder="Konfirmasi Password" :value="passwordConfirmation"
                                            @update:value="passwordConfirmation = $event" />
                                    </div>
                                </div>
                                <!-- Footer Section -->
                                <div class="mt-2">
                                    <ButtonPrimary
                                        class-name="inline-flex justify-center w-full px-4 py-2 font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm text-md focus:outline-none focus:ring-0 sm:text-sm"
                                        type="submit" label="Ubah Password" :disabled="isLoading" :is-loading="isLoading" />
                                </div>
                            </form>
                        </DialogPanel>
                    </TransitionChild>
                </div>
            </div>
        </Dialog>
    </TransitionRoot>
</template>