<script lang="ts">
  import WeAreText from './lib/WeAreText.svelte'
  import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
  import { onMount } from "svelte";
  import ZSpacer from './lib/Universal/ZSpacer.svelte';
  import planeImg from './images/PlaneGrid.png';

  window.onload = function() {
    //window.scrollTo(0, 100);
    window.scrollTo(0, 5500); // Debug
  }

  // Auto assigned fields (Will change after load)
  let scrollPos: number = -1;
  let parallaxProgress: number = -1;
  
  const handleProgress = (progress) => {
    parallaxProgress = progress;
  };
  
  function debugClick(){
  }

  let weAreTexts: string[] = ['overlooked', 'underfunded', 'constrained', 'depleated'];
</script>

<svelte:window bind:scrollY={scrollPos} />

<main>
  <div class="topnav">
    <a class="active" href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div> 

  <Parallax 
    onProgress={handleProgress}
    sections={10}
    config={{stiffness: 0.2, damping: 0.3}}
    >
    <ParallaxLayer rate={0} span={10} style="background: url('{planeImg}'); filter: brightness(10%);" />

    <StickyLayer offset={{ top: 0, bottom: 10 }} style="z-index: 1000;">
      <div>
        {scrollPos}
      </div>
      <button on:click={debugClick}>Debug button</button>
    </StickyLayer>

    {#each weAreTexts as text, i}
    {@const stickyOffset = 0.65}
    {@const stickyInterval = 1}
    {@const stickyDuration = 0.5}

    <StickyLayer class="align-center" rate={-1} offset={{ top: stickyInterval * i + stickyOffset, bottom: stickyInterval * i + stickyDuration + stickyOffset}}>
      <div class="stickyText" style="margin-top: 1vw;">
        {text}
      </div>
    </StickyLayer>
    {/each}

    <StickyLayer offset={{ top: 5.5, bottom: 5.5 }} style="background-color: #242424;">
      <div class="align-center stickyText" style="font-size: 9vw; padding-top: 200px;">
        The deprived devs
      </div>
    </StickyLayer>

    <StickyLayer class="align-center" offset={{ top: 0, bottom: 5.125 }} let:progress>
      <WeAreText containerProgress={progress}/>
    </StickyLayer>
  </Parallax>
</main>

<style>
  .stickyText {
    font-family: CozetteVector;
    font-size: 5vw;
  }
</style>

