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

  let canvas: HTMLCanvasElement;

  let loaded = false;

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

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

  function updateColor(c: string) {
    const d = new Color(rgbToHex(c));
    color.set(d.r, d.g, d.b);
  }

  $: if ($colors.background) {
    updateColor($colors.background);
  }

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

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

<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 4s;
  }

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