<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 './assets/images/PlaneGrid.png';
  import imgBackground from './assets/images/CubeSideTransparent.png';
  import deprivedTeam from './assets/images/DeprivedTeam.jpg';
  import location from './assets/images/thisLocation.png';
  import photo from './assets/images/realistic.png';

  window.onload = function() {
    //window.scrollTo(0, 100);
    window.scrollTo(0, 5800); // 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', 'depleted'];
</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={7.000000001}
    config={{stiffness: 0.2, damping: 0.3}}
    >
    <ParallaxLayer rate={0} span={7.000000001} style="background: url('{planeImg}'); filter: brightness(10%);" />

    <ParallaxLayer rate={1} span={2}>
      <div style="background: url('{imgBackground}'); filter: brightness(100%); z-index: 1; height: 10%;">

      </div>
    </ParallaxLayer>

    <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: 6, bottom: 6 }} style="background-color: #242424; margin-bottom: 20vw;">
      <div class="align-center stickyText" style="font-size: 9vw; padding-top: 200px;">
        The deprived devs
      </div>

      <div class="align-center">
        <img src="{deprivedTeam}" alt="The deprived team" style=" width: 50%; height: 50%; border-radius: 2vw;"/>
      </div>
    </StickyLayer>

    <StickyLayer class="align-center" offset={{ top: 0, bottom: 5.6 }} let:progress>
      <WeAreText containerProgress={progress}/>
    </StickyLayer>
  </Parallax>
  
  <div class="align-center" style="font-size: 3vw; height: 50vh;">
    Timeline!
    This website is not at all finished. Come back later or contact us at: alex@deprived.dev
  </div>

  <!-- <div >
    <div class="align-center">
        <img src="{location}" alt="a funny place" style=" width: 50%; height: 50%; border-radius: 2vw;"/>
      </div>
    <div class="align-center" style="padding-top: 2.5vw;">
        <img src="{photo}" alt="a funny place" style=" width: 50%; height: 50%; border-radius: 2vw;"/>
      </div>
  </div> -->

  <!-- <div class="align-center" style="width: 100%;">
    <div style="justify-items: center; display: flex">
      {#each {length: 10} as _, i}
      <div style="justify-items: start; display: flex;">
        <div class="align-center">
          THE TEAM!!!
        </div>
        <img src="{deprivedTeam}" alt="The deprived team" style=" width: 50%; height: 50%; border-radius: 2vw;"/>
      </div>
      {/each}
    </div>
  </div> -->
</main>

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

  div {
    font-family: CozetteVector;
  }
</style>

