---
import BaseHead from "@components/BaseHead.astro";
import Header from "@components/Header.astro";
import { SITE_DESCRIPTION, SITE_TITLE } from "@ptypes/consts.ts";

let top: string[] = [];
let bottom: string[] = [];
const api: string =
  "https://fshare.kami.boo/api/server/folder/cmm9jbqvt00025omwu5cnpw9i";
const response = await fetch(api);

if (response.ok) {
  const data = await response.json();
  const files = data.files.map(
(f: Response) => `https://shit-cache.illegalesachen.download/${btoa('https://fshare.kami.boo/raw' + f.url.substring(2))}`,
  ) as string[];

  const middle = Math.round(files.length / 2);
  top = files.slice(0, middle);
  bottom = files.slice(middle);
} else {
  const errorBody = await response.text();
  console.error(
    "FAILED TO FETCH",
    response.status,
    response.statusText,
    errorBody,
  );
  process.exit(1);
}
---

<!doctype html>
<html lang="en">
  <head>
    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
    <style>
      .layout {
        display: flex;
        height: 100%;
        width: 100%;
      }

      .sidebar {
        height: 100vh;
        display: flex;
        flex-direction: column;
        padding: 0;
        box-sizing: border-box;
        z-index: 10;
        background: rgba(0, 0, 0, 0.5);
        color: white;
      }

      .scrolling-gallery {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        margin: 1cm;
      }

      main {
        background: white;
        overflow: hidden;
      }

      .gallery-wrapper {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        transform: rotate(-8deg) scale(1.3);
      }

      .scroll-track {
        display: flex;
        gap: 3rem;
        width: max-content;
        animation: infiniteScroll 500s linear infinite;
        padding: 0 2rem;
      }

      .track-reverse {
        animation: infiniteScrollReverse 600s linear infinite;
      }

      .tilted-container {
        width: 220px;
        height: 280px;
        flex-shrink: 0;
        border-radius: 12px;
        overflow: hidden;
        transition: transform 0.3s ease;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }

      .tilted-container:hover {
        transform: scale(1.1);
        z-index: 1;
      }

      .tilted-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      @keyframes infiniteScroll {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-50%);
        }
      }

      @keyframes infiniteScrollReverse {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(50%);
        }
      }
    </style>
  </head>
  <body>
    <div class="layout">
      <aside class="sidebar">
        <Header />
      </aside>

      <main class="scrolling-gallery">
        <div class="gallery-wrapper">
          <div id="top-images" class="scroll-track">
            {
              [...top, ...top].map((src) => (
                <a class="tilted-container" href={src} target="_blank">
                  <img src={src} loading="lazy" />
                </a>
              ))
            }
          </div>
          {}
          <div id="bottom-images" class="scroll-track track-reverse">
            {
              [...bottom, ...bottom].map((src) => (
                <a class="tilted-container" href={src} target="_blank">
                  <img src={src} loading="lazy" />
                </a>
              ))
            }
          </div>
        </div>
      </main>
    </div>
    <script>
      function shuffleImages(selector: string) {
        const track = document.querySelector(selector);
        if (!track) return;

        const items = Array.from(track.children);
        const shuffled = items.sort(() => Math.random() - 0.5);

        track.innerHTML = "";

        const fragment = document.createDocumentFragment();
        [...shuffled, ...shuffled].forEach((item) => {
          fragment.appendChild(item.cloneNode(true));
        });

        track.appendChild(fragment);
      }

      shuffleImages("#top-images");
      shuffleImages("#bottom-images");
    </script>
  </body>
</html>
