<script lang="ts" setup>
// states

const { $gsap: gsap } = useNuxtApp();

const isSiteLoadingDisabled = useCookie("is-site-loading-disabled", {
    default: () => false,
});

const shouldRenderLoadingOverlay = ref(true);
const isAssetLoaded = ref(false);

const progressInterval = ref<NodeJS.Timeout | null>(null);
const assetLoadingProgress = ref(10);

const isWindowScrollLocked = useScrollLock(window);

// computed

const progressStyle = computed(() => {
    return {
        width: `${assetLoadingProgress.value}%`,
    };
});

// methods

const onAssetLoaded = () => {
    clearInterval(progressInterval.value!);
    assetLoadingProgress.value = 100;
    isAssetLoaded.value = true;
};

const onAssetFinished = () => {
    gsap.to("#loading-overlay", {
        opacity: 0,
        onComplete: () => {
            shouldRenderLoadingOverlay.value = false;
            isWindowScrollLocked.value = false;
            isSiteLoadingDisabled.value = true;
        },
    });
};

// lifecycle

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

    if (!isSiteLoadingDisabled.value) {
    }

    const heymlzLoadingAnimation = document.querySelector("#heymlz-loading-animation") as HTMLVideoElement;

    if (heymlzLoadingAnimation?.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA) {
        onAssetLoaded();
    }

    progressInterval.value = setInterval(() => {
        assetLoadingProgress.value += Math.random() * 10;
    }, 500);

    gsap.to("#loading-overlay", {
        opacity: 1,
    });
});
</script>

<template>
    <div
        v-if="shouldRenderLoadingOverlay"
        id="loading-overlay"
        class="fixed inset-0 size-full z-9999 flex-center bg-black"
    >
        <div
            class="flex-col-center gap-6 transition-all duration-450 ease-in-out"
            :class="isAssetLoaded ? 'opacity-0 scale-75' : 'opacity-100 scale-100'"
        >
            <NuxtImg src="/img/heymlz/heymlz-text-logo.png" class="invert w-[250px]" />
            <div class="bg-slate-800 w-[400px] h-1 rounded-full overflow-hidden">
                <div class="bg-slate-100 h-full w-full transition-all duration-250" :style="progressStyle" />
            </div>
        </div>

        <video
            id="heymlz-loading-animation"
            muted
            autoplay
            playsinline
            webkit-playsinline
            @canplay="onAssetLoaded"
            @ended="onAssetFinished"
            src="/video/heymlz/heymlz-fast-loading.mp4"
            class="absolute z-20 w-[700px] brightness-75 transition-all duration-[1s]"
            :class="isAssetLoaded ? 'opacity-100' : 'opacity-0'"
            :style="{
                mask: 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, black 20%, black 80%, rgba(0,0,0,0) 100%)',
            }"
        />
    </div>
</template>
