"use client";

import Image from "next/image";
import Link from "next/link";
import { useState } from "react";

const LibraryClient = ({ did, incompleteBooks, rankedBooks }) => {
	let maxRating = -Infinity;
	let minRating = Infinity;

	rankedBooks.forEach((book) => {
		maxRating = Math.max(book.averageRating, maxRating);
		minRating = Math.min(book.averageRating, minRating);
	});

	rankedBooks = rankedBooks
		.map((book) => ({
			...book,
			normalizedRating:
				(100 * (book.averageRating - minRating)) /
				(maxRating - minRating)
		}))
		.map((book) => ({
			...book,
			hrsToRead: (275 * book.pageCount) / 60 / 250
		}))
		.map((book) => ({
			...book,
			eph: book.normalizedRating / book.hrsToRead
		}));

	rankedBooks.sort((a, b) => b.eph - a.eph);

	console.log(rankedBooks);

	const [displayedBooks, setDisplayedBooks] = useState(rankedBooks);
	const [showRankedBooks, setShowRankedBooks] = useState(true);

	return (
		<div className="grid grid-rows-10 row-span-9">
			<div className="gap-4 grid grid-cols-2 row-span-1 transition-all">
				<button
					className={`col-span-1 flex items-center justify-center text-2xl rounded-t-2xl ${
						showRankedBooks
							? "bg-emerald-900 text-amber-100 transform translate-y-1"
							: "bg-emerald-900/80 text-amber-100/80"
					}`}
					onClick={() => {
						setShowRankedBooks(true);
						setDisplayedBooks(rankedBooks);
					}}
				>
					Ranked Books
				</button>
				<button
					className={`col-span-1 flex items-center justify-center text-2xl rounded-t-2xl ${
						!showRankedBooks
							? "bg-emerald-900 text-amber-100 transform translate-y-1"
							: "bg-emerald-900/80 text-amber-100/80"
					}`}
					onClick={() => {
						setShowRankedBooks(false);
						setDisplayedBooks(incompleteBooks);
					}}
				>
					Books with Missing Data
				</button>
			</div>
			<div
				className={`auto-rows-min bg-emerald-900 gap-4 grid grid-cols-5 overflow-y-scroll p-4 rounded-b-xl row-span-9`}
			>
				{displayedBooks?.map((book) => {
					return (
						<Link
							href={`/book/${book.hiveID.slice(3)}`}
							key={book.hiveID}
						>
							<div className="aspect-2/3 overflow-hidden relative rounded-2xl hover:scale-105 transition-transform">
								<Image
									alt={`Book cover for ${book.title} by ${book.authors}`}
									className="object-cover"
									fill
									src={`/api/blob?cid=${book.coverRef}&did=${did}`}
								/>
							</div>
						</Link>
					);
				})}
			</div>
		</div>
	);
};

export default LibraryClient;