"use client";

import { cn } from "@/lib/utils/cn";
import { useCallback, useState } from "react";
import Image from "next/image";
import { Loader2 } from "lucide-react";
import { api } from "@/lib/trpc/client";
import { TopicsEnum } from "@/config/enums/topic";
import { transformPostsToArticleList } from "@/features/posts/_lib/transformers";
import PhotoItem from "@/components/shared/articles/photo-item";

export default function PhotoList() {
    const [limit, setLimit] = useState(7);
    const { data: items = [], isFetching } = api.posts.list.useQuery(
        {
            topic: TopicsEnum.PHOTO,
            limit
        },
        {
            select: transformPostsToArticleList,
            placeholderData: (data) => data
        }
    );
    const { data: total = 0 } = api.posts.count.useQuery({
        topic: TopicsEnum.PHOTO
    });

    const hasMore = items.length < total;

    const onLoadMoreClick = useCallback(() => {
        setLimit((prev) => prev + 7);
    }, []);

    if (!items.length)
        return (
            <div className="my-6">
                <p className="text-lg font-medium">Artikler ikke fundet</p>
            </div>
        );

    return (
        <div>
            <ul className="grid gap-x-2 gap-y-2 sm:grid-cols-2 lg:grid-cols-4 lg:gap-x-5">
                {items.map((item, index) => {
                    const group = index % 7;
                    const firstThree = group < 3;
                    return (
                        <li
                            key={index}
                            className={cn(
                                "relative before:absolute before:top-0 before:-right-[10px] before:h-full before:bg-neutral-500 last:before:hidden nth-[7n]:before:hidden nth-[7n-4]:before:hidden lg:before:w-px",
                                !group && "lg:col-span-2",
                                firstThree && "sm:max-lg:col-span-2"
                            )}
                        >
                            <PhotoItem data={item} type={firstThree ? "large" : "default"} />
                        </li>
                    );
                })}
            </ul>

            {hasMore && (
                <button
                    className="text-client-red relative mt-4 flex w-fit gap-2 text-sm font-semibold"
                    disabled={isFetching}
                    onClick={onLoadMoreClick}
                >
                    <Image
                        src="/icons/icon_arrow_right.svg"
                        alt="arrow right"
                        aria-hidden
                        width={16}
                        height={16}
                        className="mt-0.5 inline-block size-4 shrink-0"
                    />
                    <span className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline">
                        mere foto
                    </span>
                    {isFetching && <Loader2 className="size-5 animate-spin" />}
                </button>
            )}
        </div>
    );
}