<script lang="ts">
  import { onMount } from "svelte";
  import { createLeaves, setRotation } from "./leaves";
  import { Color } from "ogl";
  import { rgbToHex } from "@helpers/colors";

  let canvas: HTMLCanvasElement;

  let loaded = false;

  function handleScroll() {
    setRotation(window.scrollY / window.innerHeight);
  }

  const color = new Color("#000000");

  const updateBackgroundColor = () => {
    const background = window.getComputedStyle(document.body);
    const d = new Color(rgbToHex(background.backgroundColor));
    color.set(d.r, d.g, d.b);
  };

  onMount(() => {
    updateBackgroundColor();
    createLeaves({ canvas, num: 20, minZ: 0, maxZ: 1, color });
    setTimeout(() => {
      loaded = true;
    }, 100);
  });
</script>

<svelte:window on:scroll={handleScroll} />
<svelte:body on:transitionend={updateBackgroundColor} />

<canvas bind:this={canvas} class:loaded />

<style>
  :global(body) {
    z-index: 1;
  }
  canvas {
    width: 100vw !important;
    height: 100vh !important;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2s;
  }

  .loaded {
    opacity: 0.2;
  }
</style>
