---
import { getLastAlbums } from "@/content/photos/albums";
import { getSettings } from "@/content/settings/settings";
import CalendarIcon from "@/icons/CalendarIcon.astro";
import { getImageSize, getImageUrl } from "@/lib/images";
import { getAlbumRoute } from "@/lib/routing";
import { Image } from "astro:assets";

interface Props {
    albums: LastGalleriesComponent;
}

function calculateSizeClasses(amount: number, length: number) {
    if (amount === 2 || length <= 2) {
        return "lg:w-[45%] w-full";
    }
    else {
        return "lg:w-[31%] w-full";
    }
}

const albums = Astro.props.albums;
const settings = await getSettings();
const lastAlbums = await getLastAlbums(albums.amount);
const size = calculateSizeClasses(albums.amount, lastAlbums.length);
---

{ (settings.photo.enabled && lastAlbums.length > 0) && (
<div
    id={`lastalbums-${albums.id}`}
    class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
>
    <div class="flex flex-row justify-between items-center w-full">
        <h2 class="text-4xl font-bold">{albums.title}</h2>
        <div>
            <a 
                href={settings.photo.categoryIndex.indexRouteTemplate}
                class="text-(--ptt) bg-(--ptc) hover:text-(--stt) hover:bg-(--stc) duration-200 py-3 px-5 rounded-full text-lg"
            >
                {albums.readMoreButtonText}
            </a>
        </div>
    </div>

    { lastAlbums.length >= 4 ? (
        <div class="grid lg:grid-cols-2 lg:grid-rows-2 grid-cols-1 grid-rows-4 gap-x-10 gap-y-8">
            { lastAlbums.map((album) => {
                const imageSize = getImageSize(album.thumbnail.width, album.thumbnail.height, 0.5);

                return (
                    <a href={getAlbumRoute(settings.photo, album)} class={`w-full flex flex-col gap-2`}>
                        <Image
                            src={getImageUrl(album.thumbnail.url)}
                            alt={album.title}
                            class="flex rounded-2xl shadow-md w-full"
                            width={imageSize.width}
                            height={imageSize.height}
                        />
                        <h4 class="font-semibold text-[28px]">{album.title}</h4>
                        <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
                            <CalendarIcon width={20} height={20} />
                            <div>{album.startDate}</div>
                        </div>
                    </a>
                )
            }) }
        </div>
    
    ) : (
        <div class="flex flex-col lg:flex-row lg:justify-between gap-y-6">
            { lastAlbums.map((album) => {
                const imageSize = getImageSize(album.thumbnail.width, album.thumbnail.height, 0.5);

                return (
                    <a href={getAlbumRoute(settings.photo, album)} class={`${size} flex flex-col gap-2`}>
                        <Image
                            src={getImageUrl(album.thumbnail.url)}
                            alt={album.title}
                            class="flex rounded-2xl shadow-md w-full"
                            width={imageSize.width}
                            height={imageSize.height}
                        />
                        <h4 class="font-semibold text-[28px]">{album.title}</h4>
                        <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
                            <CalendarIcon width={20} height={20} />
                            <div>{album.startDate}</div>
                        </div>
                    </a>
                )
                
            }) }
        </div>
    ) }
</div>
) }