<script lang="ts">
    import { onMount } from 'svelte';

    // Params
    let mouseMoveDevider = 1.5;

    // Site variables
    let mouseX = 0;
    let mouseY = 0;

    // Element binded variables
    let animatedTopBackgroundX = 0;
    let animatedTopBackgroundY = 0;

    let StartPageAnimated: Element;

    function handleMouseMove(event: MouseEvent) {
        // Calculate the mouse position relative to the center of the div
        const centerX = StartPageAnimated.clientWidth / 2;
        const centerY = StartPageAnimated.clientHeight / 2;

        mouseX = event.clientX;
        mouseY = event.clientY;
        
        animatedTopBackgroundX = mouseX - StartPageAnimated.clientLeft - centerX;
        animatedTopBackgroundY = mouseY - StartPageAnimated.clientTop - centerY;

        //console.log(mouseX+"\n"+mouseY);
    }

    // let windowWidth = window.innerWidth;
    // let windowHeight = window.innerHeight;

    // // Update window dimensions on mount
    // onMount(() => {
    //     const updateDimensions = () => {
    //     windowWidth = window.innerWidth;
    //     windowHeight = window.innerHeight;
    //     };

    //     window.addEventListener('resize', updateDimensions);

    //     return () => {
    //     window.removeEventListener('resize', updateDimensions);
    //     };
    // });
</script>

<svelte:body on:mousemove={handleMouseMove}/>

<div class="StartPageContainer">

    <div class="StartPageAnimated" bind:this={StartPageAnimated} style="transform: translate({animatedTopBackgroundX}px, {animatedTopBackgroundY}px);">
        <span class="rotate45" style="display: flex; justify-content: center; align-items: center;">TEXT!!!</span>
    </div>
</div>

<style>
    .StartPageContainer{
        height: 40vh;

        background-color: burlywood;
        overflow: hidden;
    }

    .StartPageAnimated{
        background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$");
        position: static;
        height: 100vh;
        height: 100vw;
        
        transition: all 1000ms cubic-bezier(0.16,1.63,0.01,0.99);

        justify-content: center;
        vertical-align: middle;
        display: flex;
    }

    .rotate45 {
        transform: rotate(-45deg); /* Rotate the element by 45 degrees */
    }
</style>