<script lang="ts">
    import { onMount } from "svelte";
    import { Vector2 } from "./../Utils/Vector2";
    import TopNameTextPlate from "./TopNameTextPlate.svelte";
    //import { throttle } from "./../Utils/Throttle";

    import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";

    // Params
    let mouseMoveScale: number = 0.25;
    let targetTextLenght: number = 100;

    // Site variables
    let mousePos: Vector2;

    // Element binded variables
    let mouseRelativeScaled: Vector2 = new Vector2(0, 0);

    let windowWidth = 0;
    let windowHeight = 0;

    let screenCenter: Vector2;

    let StartPageAnimated: Element | null;
    let windowRef: Window;

    function onMouseMoved(event: MouseEvent) {
        mousePos = new Vector2(event.clientX, event.clientY);

        updateAnimation(mousePos);
    }

    function updateAnimation(mousePos: Vector2) {
        let mouseRelativePos = mousePos.Sub(screenCenter);
        mouseRelativeScaled = mouseRelativePos.Scale(mouseMoveScale);

        //console.log(mouseRelativePos.x+"\n"+mouseRelativePos.y);
    }

    onMount(() => {
        windowRef = window;

        const updateDimensions = () => {
            windowWidth = windowRef.innerWidth;
            windowHeight = windowRef.innerHeight;

            screenCenter = new Vector2(windowWidth / 2, windowHeight / 2);

            //console.log("Window size changed: (" + windowWidth + ", " + windowHeight + ")");
        };

        updateDimensions(); // On first pass

        windowRef.addEventListener("resize", updateDimensions);

        const RevertToOrigin = () => {
            if (
                navigator.userAgent.search(/gecko/i) > 0 &&
                StartPageAnimated !== null
            ) {
                StartPageAnimated.classList.add("FirefoxSmoothTranition");
            }
            updateAnimation(new Vector2(windowWidth / 2, windowHeight / 2));
        };
        document.documentElement.addEventListener("mouseleave", RevertToOrigin);

        const RemoveFirefoxSmoothTranition = () => {
            if (
                navigator.userAgent.search(/gecko/i) > 0 &&
                StartPageAnimated !== null
            ) {
                StartPageAnimated.classList.remove("FirefoxSmoothTranition");
            }
        };
        document.documentElement.addEventListener(
            "mouseenter",
            RemoveFirefoxSmoothTranition,
        );

        return () => {
            windowRef.removeEventListener("resize", updateDimensions);
        };
    });

    const programmingLanguages: string[] = [
        "C++",
        "C#",
        "ARDUINO",
        "PYTHON",
        "JAVA",
        "JAVASCRIPT",
        "TYPESCRIPT",
        "HTML",
        "CSS",
    ];

    function getRandomInt(max: number) {
        return Math.floor(Math.random() * max);
    }

    function GrabRandomString() {
        let outString: string = "";
        while (outString.length < targetTextLenght) {
            outString +=
                programmingLanguages[
                    getRandomInt(programmingLanguages.length)
                ] + " ";
        }

        return outString; // At about target size
    }
</script>

<svelte:window on:mousemove={onMouseMoved} />


<ParallaxLayer class="StartPageContainer" rate={0.25} offset={0} span={0}>
        <div
            class="StartPageAnimated"
            bind:this={StartPageAnimated}
            style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px) translateZ(0) rotate(0.001deg);"
        >
            {#each { length: 100 } as _, i}
                <span class="rotate45 SkillsText">
                    {GrabRandomString()}
                </span>
            {/each}
        </div>
    </ParallaxLayer>

    <ParallaxLayer rate={0} offset={0.25} span={0}>
        <TopNameTextPlate />
    </ParallaxLayer>

<!-- <div class="StartPageContainer">
    <div class="TopOverlay">
        <TopNameTextPlate/>
    </div>

    <div
        class="StartPageAnimated"
        id="StartPageAnimated"
        bind:this={StartPageAnimated}
        style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px) translateZ(0) rotate(0.001deg);"
    >
        {#each {length: 100} as _, i}

            <span
            class="rotate45 SkillsText"
            >
                {GrabRandomString()}
            </span
        >
        {/each}
    </div>
</div> -->

<div id="DummyDiv" class="FirefoxSmoothTranition StartPageContainer TopOverlay" style="display: none !important;" />

<style>
    .StartPageContainer {
        /* height: 40vh; */

        background-color: burlywood;
        overflow: hidden;
        position: relative;

        justify-content: center;
        align-items: center;
        display: flex;

        padding: 0;
    }

    .StartPageAnimated {
        /* background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$"); */
        background-color: #131313;
        position: absolute;
        height: 150vh;
        width: 150vw;

        padding: 0;

        transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
        -moz-transition: none;

        left: -25vw;
        top: -50vh;

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

        pointer-events: none;
    }

    .FirefoxSmoothTranition {
        transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
        -moz-transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99) !important;
    }

    .SkillsText {
        font-family: "CozetteVector";

        text-align: start;
        font-size: x-large;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;

        width: 2rem;

        color: rgb(66, 66, 66);
    }

    .TopOverlay {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;

        padding: 0;
    }

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