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

let shuffled: string[] = [];
let images: 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://fshare.kami.boo/raw${f.url.substring(2)}`).sort(() => Math.random() - .5) as string[];
	const middle = Math.round(files.length / 2);
	shuffled = files.slice(0,middle);
	images = 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.10);
			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 class="scroll-track">
						{[...images, ...images].map((src) => (
						<a class="tilted-container" href={src} target="_blank">
							<img src={src} loading="lazy" />
						</a>
						))}
					</div>
					{

					}
					<div class="scroll-track track-reverse">
						{[...shuffled,...shuffled].map((src) => (
						<a class="tilted-container" href={src} target="_blank">
							<img src={src} loading="lazy" />
						</a>
						))
					}
					</div>
				</div>
			</main>
		</div>
	</body>
</html>
