<script lang="ts">
    import { onMount } from "svelte"
    import DesktopHeader from "./desktop.svelte"
    import MobileHeader from "./mobile.svelte"
    import { refresh } from "../../stores"

    let background: boolean
    let isHomePage: boolean
    let scrolled: boolean = false

    // Initial background state
    function updateBackground() {
        background = !isHomePage || scrolled
    }

    // Update isHomePage based on current path
    function checkHomePage() {
        isHomePage = window.location.pathname === "/"
        updateBackground()
    }

    // Scroll event listener to check if scrolled 100vh
    function checkScroll() {
        const scrollHeight = window.innerHeight // 100vh in pixels
        scrolled = window.scrollY >= scrollHeight
        checkHomePage()
    }

    onMount(() => {
        if (typeof window !== "undefined") {
            // Initial check
            checkHomePage()
            checkScroll()
            // Listen for changes
            window.addEventListener("scroll", checkScroll)
            window.addEventListener("popstate", checkHomePage)

            return () => {
                // Cleanup event listeners
                window.removeEventListener("scroll", checkScroll)
                window.removeEventListener("popstate", checkHomePage)
            }
        }
    })

    $: {
        console.log($refresh)
        if (typeof window !== "undefined") {
            checkHomePage()
            checkScroll()
        }
    }
    let show = false
    $: console.log(show)
</script>

<main class="headercontainer">
    {#key $refresh}
        <nav class="trans" class:bg="{background || show}">
            <div class="mobile-header">
                <MobileHeader bind:show="{show}" />
            </div>
            <div class="desktop-header">
                <DesktopHeader bind:show="{show}" />
            </div>
        </nav>
    {/key}
</main>
{#if !isHomePage}
    <div class="placeholder"></div>
{/if}

<style global lang="less">
    @import "../../assets/css/main.less";
    @import "../../assets/css/variables.less";
    .trans {
        background-color: transparent;
        transition: background-color 0.5s ease-in-out;
    }
    .bg {
        background-color: var(--background-color);
    }

    @desktop: ~"only screen and (min-width: 1440px)";
    .HP {
        h2 {
            font-size: 2.1rem !important;
            @media @tablet {
                font-size: 3.2rem !important;
            }
        }
    }

    .ignore {
        display: none !important;
        visibility: hidden;
    }
    nav {
        position: relative;
        height: 100%;
        width: 100%;
    }
    .placeholder {
        height: 105px;
    }
    .headercontainer {
        display: flex;
        position: fixed;
        z-index: 5500;
        top: 0px;
        justify-content: space-between;
        width: 100%;
        color: var(--normal-font-color);
        height: 105px;
    }
    @media @desktop {
        .headercontainer,
        .placeholder {
            height: 120px;
        }
        nav {
            position: initial;
        }
    }

    @media @mobile {
        .desktop-header {
            display: none;
        }
        .mobile-header {
            display: inherit;
        }
    }
    @media @desktop {
        .mobile-header {
            display: none;
        }
        .desktop-header {
            display: inherit;
        }
    }
</style>
