<script lang="ts" setup>

// state

const { $gsap: gsap } = useNuxtApp();
const showLoadingOverlay = useState("showLoadingOverlay");
const disableLoadingOverlay = useState("disableLoadingOverlay");
const shouldRenderLoadingOverlay = ref(true);

const isWindowScrollLocked = useScrollLock(window);

// watch

watch(() => showLoadingOverlay.value, (value) => {
    if (!value) {
        const timeline = gsap.timeline();

        const imageElement = document.querySelector("#loading-overlay-image") as HTMLImageElement;

        imageElement.src = "/img/heymlz-loading-2.gif";

        timeline
            .to("#loading-overlay", {
                scale: 1
            })
            .to("#loading-overlay", {
                opacity: 0,
                delay: 2,
                onComplete: () => {
                    shouldRenderLoadingOverlay.value = false;
                    isWindowScrollLocked.value = false;
                    disableLoadingOverlay.value = true;
                }
            });
    }
}, {
    once: true
});


// lifecycle

onMounted(() => {
    isWindowScrollLocked.value = true;

    const newImage = new Image();
    newImage.src = "/img/heymlz-loading-2.gif";
});

</script>

<template>
    <div
        v-if="shouldRenderLoadingOverlay"
        id="loading-overlay"
        class="fixed inset-0 size-full z-9999 flex-center bg-black"
    >
        <img
            id="loading-overlay-image"
            src="/img/heymlz-loading-1.gif"
            class="opacity-0 scale-70 absolute z-20"
            alt=""
        />
        <div
            id="loading-overlay-gradient"
            class="opacity-0 scale-x-0 w-[1000px] h-[70px] bg-linear-to-r from-blue-500 via-violet-500 to-purple-500 blur-[150px] rounded-[100px]"
        />
    </div>
</template>

<style>

#loading-overlay-image {
    animation-name: loading-overlay-image-animation;
    animation-duration: 1s;
    animation-delay: 0.35s;
    animation-fill-mode: forwards;
}

#loading-overlay-gradient {
    animation: 1.5s normal 0.5s 1 forwards loading-overlay-gradient-animation,
    1s ease-in-out 2s infinite alternate-reverse loading-overlay-gradient-pules-animation;
}

@keyframes loading-overlay-image-animation {
    from {
        opacity: 0;
        scale: 0.7;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

@keyframes loading-overlay-gradient-animation {
    from {
        opacity: 0;
        scale: 0 1 1;
    }

    to {
        opacity: 0.9;
        scale: 1 1 1;
    }
}

@keyframes loading-overlay-gradient-pules-animation {
    from {
        opacity: 0.8;
        scale: 0.8 1 1;
    }

    to {
        opacity: 0.9;
        scale: 1 1 1;
    }
}
</style>