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

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

const isSiteLoadingDisabled = useCookie("is-site-loading-disabled", {
    default: () => false,
    expires: new Date(Date.now() + 15 * 60 * 1000),
});

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

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!);
//     criticalLoad.value = false;
//     assetLoadingProgress.value = 100;
//     isAssetLoaded.value = true;
// };

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

// watch

watch([assetLoadingProgress, criticalLoad], ([assetLoadingProgress, criticalLoad]) => {
    if (criticalLoad && assetLoadingProgress >= 100) {
        onAssetFinished();
    }
});

// lifecycle

onMounted(() => {
    if (!isSiteLoadingDisabled.value) {
        isWindowScrollLocked.value = true;

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

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

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

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

<template>
    <div
        v-if="shouldRenderLoadingOverlay && !isSiteLoadingDisabled"
        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-[300px] sm: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>
