<template>
    <TransitionRoot :show="isOpen" appear as="template">
        <Dialog as="div" class="relative z-50" @close="close">
            <TransitionChild
                as="template"
                enter="duration-300 ease-out"
                enter-from="opacity-0"
                enter-to="opacity-100"
                leave="duration-200 ease-in"
                leave-from="opacity-100"
                leave-to="opacity-0"
            >
                <div class="fixed inset-0 bg-gray-300 bg-opacity-[0.45]" />
            </TransitionChild>

            <div class="fixed inset-0 w-screen h-screen overflow-y-auto">
                <div
                    class="flex items-center justify-center w-screen h-screen p-4 text-center"
                >
                    <TransitionChild
                        as="template"
                        enter="duration-300 ease-out"
                        enter-from="opacity-0 scale-95"
                        enter-to="opacity-100 scale-100"
                        leave="duration-200 ease-in"
                        leave-from="opacity-100 scale-100"
                        leave-to="opacity-0 scale-95"
                    >
                        <DialogPanel
                            :class="[
                                sizes[size],
                                paddings[padding],
                                colors[color],
                                shadows[shadow],
                            ]"
                            class="w-full text-left align-middle transition-all transform rounded-lg"
                            :dir="$i18n.locale === 'ar' ? 'rtl' : 'ltr'"
                        >
                            <div
                                v-if="closeButton"
                                class="flex items-center justify-end w-full"
                            >
                                <button
                                    class="p-1"
                                    type="button"
                                    @click="close"
                                >
                                    <svg
                                        fill="none"
                                        height="21"
                                        viewBox="0 0 21 21"
                                        width="21"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            d="M16.4845 5.84175L15.3095 4.66675L10.6512 9.32508L5.99287 4.66675L4.81787 5.84175L9.4762 10.5001L4.81787 15.1584L5.99287 16.3334L10.6512 11.6751L15.3095 16.3334L16.4845 15.1584L11.8262 10.5001L16.4845 5.84175Z"
                                            fill="#5E6278"
                                        />
                                    </svg>
                                </button>
                            </div>
                            <slot></slot>
                        </DialogPanel>
                    </TransitionChild>
                </div>
            </div>
        </Dialog>
    </TransitionRoot>
</template>

<script>
import {
    Dialog,
    DialogPanel,
    DialogTitle,
    TransitionChild,
    TransitionRoot,
} from "@headlessui/vue";

export default {
    props: {
        size: {
            type: String,
            default: "md",
        },
        closeButton: {
            type: Boolean,
            default: true,
        },
        padding: {
            type: String,
            default: "md",
        },
        color: {
            type: String,
            default: "white",
        },
        shadow: {
            type: String,
            default: "default",
        },
    },
    methods: {
        close() {
            this.isOpen = false;
        },
        open() {
            this.isOpen = true;
        },
    },
    data() {
        return {
            isOpen: false,
            sizes: {
                sm: "max-w-sm sm:pb-5 pb-20",
                md: "max-w-md sm:pb-5 pb-20",
                lg: "max-w-lg sm:pb-5 pb-20",
                xl: "max-w-xl sm:pb-5 pb-20",
                "2xl": "max-w-2xl sm:pb-5 pb-20",
                fullscreen:
                    "max-w-full w-full h-full max-h-full !rounded-none overflow-hidden sm:pb-5 pb-20",
                "semi-fullscreen":
                    "!max-w-[95vw] !w-full !h-full !max-h-[95vh] overflow-hidden sm:pb-5 pb-20",
                "semi-fullscreen-contained":
                    "!max-w-[800px] !w-full !h-full !max-h-[95vh] overflow-x-hidden overflow-y-auto sm:pb-5 pb-20",
            },
            paddings: {
                sm: "p-4",
                md: "p-6",
                lg: "p-8",
                xl: "p-10",
                "2xl": "p-12",
                none: "p-0",
            },
            colors: {
                white: "bg-white",
                blue: "bg-blue-100",
                transparent: "bg-transparent",
            },
            shadows: {
                sm: "shadow-sm",
                default: "shadow-xl",
                md: "shadow-md",
                lg: "shadow-lg",
                none: "",
            },
        };
    },
    components: {
        TransitionRoot,
        TransitionChild,
        Dialog,
        DialogPanel,
        DialogTitle,
    },
    watch: {
        isOpen: function (val) {
            const vm = this;
            if (val == true) vm.$emit("opened");
            else setTimeout(() => vm.$emit("closed"), 500);
        },
    },
};
</script>
