<script lang="ts">
  import svelteLogo from "$lib/svelteLogos/svelte-logo.png";
  import { browser } from "$app/environment";
  import { onDestroy, onMount } from "svelte";
  import { ArrowBigDown } from "lucide-svelte";
  import { fly } from "svelte/transition";
  const buildTime = __BUILD_TIME__;

  let scrollY = 0;
  const unscrollSpeed = 100;
  let unscrollScrollDiv: HTMLDivElement;
  let totalScroll = 0;

  let unscrollInterval: number | undefined = undefined;
  let lastScrollTime = 0; // Used to have delay before unscrolling
  let isBeingTouched = false; // Phone support
  const unscrollDelay = 100;

  let isLeavingAnimating = false;

  // prevent direct scroll
  let notFirstScroll = false;

  let tranisitionOverlay: HTMLElement;

  // Function with more scroll control, by chatgpt
  function smoothScrollTo(targetY: number, duration: number = 500): void {
    const startY: number = window.scrollY;
    const diff: number = targetY - startY;

    if (duration <= 0) {
      window.scrollTo(0, targetY);
      return;
    }

    let startTime: number | null = null;

    function step(timestamp: number): void {
      if (startTime === null) startTime = timestamp;
      const time = timestamp - startTime;
      const percent = Math.min(time / duration, 1);

      // easeInOutQuad easing
      const ease =
        percent < 0.5
          ? 2 * percent * percent
          : -1 + (4 - 2 * percent) * percent;

      window.scrollTo(0, startY + diff * ease);

      if (time < duration) {
        requestAnimationFrame(step);
      }
    }

    requestAnimationFrame(step);
  }

  // Out animation:
  function flyInFromTop(
    node: HTMLElement,
    {
      y = -window.innerHeight,
      duration = 400,
      opacity = 0,
    }: { y?: number; duration?: number; opacity?: number } = {},
  ) {
    const {
      delay = 0,
      duration: d,
      easing = (t) => t,
      css,
    } = fly(node, { y, duration: d, opacity });

    let start: number;
    function step(now: number) {
      if (!start) start = now;
      const elapsed = now - start - delay;
      if (elapsed < 0) return requestAnimationFrame(step);
      const t = Math.min(elapsed / d, 1);
      if (css) node.style.cssText = css(easing(t), 1 - easing(t));
      if (elapsed < d) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }

  onMount(() => {
    return; // Fuck this, I'm too lazy to fix this atm
    totalScroll = document.documentElement.scrollHeight - window.innerHeight;

    unscrollInterval = setInterval(() => {
      // Prevents scroll to bottom on first try
      if (
        !notFirstScroll &&
        scrollY > totalScroll - unscrollScrollDiv.scrollHeight
      ) {
        smoothScrollTo(totalScroll - unscrollScrollDiv.scrollHeight * 1.1, 0);

        // Allow further scroll after delay
        setTimeout(() => {
          notFirstScroll = true;
        }, 1000);
      }

      // console.log("Time with delay: " + (Date.now() - -unscrollDelay) + " Other " + lastScrollTime);
      // console.log(isBeingTouched);
      if (
        !notFirstScroll ||
        isBeingTouched ||
        Date.now() < lastScrollTime - -unscrollDelay
      ) {
        // console.log("nah");
        return;
      }

      if (totalScroll - unscrollScrollDiv.scrollHeight < scrollY) {
        smoothScrollTo(totalScroll - unscrollScrollDiv.scrollHeight, 200);
      }

      if (totalScroll <= scrollY) {
        console.log("Hit!");
        // isLeavingAnimating = true;
        flyInFromTop(tranisitionOverlay, { duration: 800 });
      }
    }, 10);
  });

  function onScroll() {
    lastScrollTime = Date.now();
    // console.log("scroll");
  }

  function onResize() {
    totalScroll = document.documentElement.scrollHeight - window.innerHeight;
  }

  onDestroy(() => {
    clearInterval(unscrollInterval);
  });

  export let hideOnPrint: boolean;
</script>

<svelte:window
  bind:scrollY
  on:scroll={() => {
    onScroll();
  }}
  on:touchstart={() => {
    isBeingTouched = true;
  }}
  on:touchend={() => {
    isBeingTouched = false;
  }}
  on:resize={onResize}
/>

<div class="{hideOnPrint ? 'hide-on-print' : ''} w-full">
  <!-- Keep scrolling thing -->
  <div class="hidden h-64 w-full flex flex-col justify-center items-center">
    <div>Keep scrolling to veiw Zhen's portfolio site!</div>
    <div class="flex justify-center">
      <ArrowBigDown />
      <ArrowBigDown />
      <ArrowBigDown />
      <ArrowBigDown />
    </div>
  </div>

  <div
    class="hidden h-64 w-full flex flex-col justify-end items-center"
    bind:this={unscrollScrollDiv}
  >
    <img
      src="/images/memes/WhatDaDog.png"
      class="w-32 h-32 object-contain"
      alt="da dog"
    />
  </div>

  <!-- About footer -->
  <div
    class="sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8"
  >
    <div class="flex justify-center">
      <div class="grid gap-8 sm:grid-cols-3 items-center w-full">
        <div class="flex flex-col items-center">
          <span class="font-bold">© 2023-2025</span>
          <br />
          <span>Benjamin Dreyer</span>
          <br />
          <span>Oliver Schwenger</span>
          <br />
          <span>Sylvester Junge</span>
          <br />
          <span>Snorre Ettrup Altschul</span>
          <br />
          <span>Zhentao Wei</span>
        </div>
        <div class="flex flex-col items-center">
          <h3><b>About this website</b></h3>
          <!-- <a href="/" target="_blank">Recursion</a> -->
          <div class="flex justify-center">
            This website was made using <a
              class="grid place-content-center"
              target="_blank"
              href="https://kit.svelte.dev/"
            >
              <img
                class="pl-2"
                src={svelteLogo}
                style="height: 1.5rem;"
                alt="SvelteKit logo"
              /></a
            >
          </div>
          <span
            >Website <a
              href="https://git.deprived.dev/DeprivedDevs/deprived-main-website"
              target="_blank">source code</a
            ></span
          >
        </div>
        <div class="flex flex-col items-center">
          <h3><b>Contact</b></h3>
          <a href="mailto:zhen@deprived.dev">zhen@deprived.dev</a>
          <div class="mt-2"></div>
          <a
            href="https://discord.gg/awatEEqc3M"
            target="_blank"
            class="social"
          >
            <!-- <span>Discord</span> -->
            <img
              src="/images/icons/discord.svg"
              class="w-8 h-8 object-contain"
              alt="Discord"
            />
          </a>
        </div>
      </div>
    </div>
    <div
      class="flex w-full justify-center border-t border-base-100 border-dashed"
    >
      Last build: {buildTime} (+2 UTC)
    </div>
  </div>
</div>

<div
  bind:this={tranisitionOverlay}
  class="{isLeavingAnimating
    ? ''
    : 'hidden'} fixed top-0 left-0 w-screen h-screen bg-base-200"
></div>
<!-- {#if isLeavingAnimating}
{/if} -->
