<script>
import { Head, usePage } from "@inertiajs/inertia-vue3";
import Notifications from "@/components/Notifications/Toasts/General.vue";
import { nextTick, onMounted, watch } from "@vue/runtime-core";
import Modal from "@/components/General/Modal.vue";
export default {
    props: {
        title: String,
    },
    data() {
        return {
            events: [],
            currentImg: null,
        };
    },
    mounted() {
        if (!this.$i18n.locale) {
            this.$i18n.locale = "en";
        }
        nextTick(() => {
            document.getElementById("app").setAttribute("data-page", null);
            setTimeout(() => {
                this.setupImageModal();
            }, 1000);
        });
    },
    watch: {
        "$page.url": function (newUrl, oldUrl) {
            // wait for 1 second to make sure the page is loaded
            setTimeout(() => {
                this.setupImageModal();
            }, 1000);
        },
    },
    methods: {
        setupImageModal() {
            // get all images in page that doesn't have the class "no-magnify"
            const images = document.querySelectorAll(
                "img:not(.no-magnify):not(.v3-emoji-picker *)"
            );

            // remove all click events
            this.events.forEach((event) => {
                event?.remove();
            });
            // add on click event to each image
            images.forEach((image) => {
                // add class to image
                image.classList.add("!cursor-pointer");
                const event = image.addEventListener("click", (e) => {
                    const src = e.target.src;
                    this.currentImg = src;
                    this.$refs["image-modal"].open();
                });
                this.events.push(event);
            });
        },
    },
    components: {
        Head,
        Notifications,
        Modal,
    },
};
</script>

<template>
    <Head :title="title" />
    <Notifications />
    <Modal
        ref="image-modal"
        color="transparent"
        shadow="none"
        size="2xl"
        class="text-white"
    >
        <img
            ref="magnified-image"
            class="object-contain w-full h-full rounded-lg no-magnify"
            :src="currentImg"
        />
    </Modal>
    <transition
        appear
        enter-active-class="transition-opacity duration-500 ease-in-out"
        enter-from-class="transform opacity-0"
        enter-to-class="scale-100 opacity-100"
        leave-active-class="transition-opacity duration-500 ease-in-out"
        leave-from-class="scale-100 opacity-100"
        leave-to-class="transform opacity-0"
        mode="out-in"
    >
        <section
            :key="$page.url"
            class="max-w-[100vw] overflow-x-hidden"
            :class="$i18n.locale === 'ar' ? 'font-sansAr' : 'font-sans'"
            :dir="$i18n.locale === 'ar' ? 'rtl' : 'ltr'"
        >
            <slot />
        </section>
    </transition>
</template>

<style>
.maincontiner input[type="checkbox"] {
    display: none !important;
}
</style>
