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

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

    // 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;
    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);

        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} />

<div class="StartPageContainer">
    <div class="TopOverlay"/>

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

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

<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: all 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);

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

    .SkillsText{
        font-size: x-large;
        display: flex; 
        justify-content: center; 
        align-items: center;
        text-wrap: nowrap;

        width: 2rem;

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

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

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