"use client";
import CityItem from "./articles/city-item";
import { cn } from "@/lib/utils/cn";
import { Fragment, useCallback, useState } from "react";
import { Loader2 } from "lucide-react";
import { Separator } from "../ui/separator";
import { api } from "@/lib/trpc/client";
import { TopicsEnum } from "@/config/enums/topic";
import { transformPostsToArticleList } from "@/features/posts/_lib/transformers";

export default function CityList({
    type = TopicsEnum.CITY_LIFE
}: {
    type: TopicsEnum.CITY_LIFE | TopicsEnum.CITY_SPACES | TopicsEnum.KBHPLUS | TopicsEnum.CITY_HOUSE;
}) {
    const [limit, setLimit] = useState(6);
    const { data: items = [], isFetching } = api.posts.list.useQuery(
        {
            with: ["primaryTag"],
            topic: type,
            limit
        },
        {
            select: transformPostsToArticleList,
            placeholderData: (data) => data
        }
    );
    const { data: total = 0 } = api.posts.count.useQuery({
        topic: type
    });

    const firstRow = items.slice(0, 2);
    const row = items.slice(2);
    const hasMore = items.length < total;

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

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

    return (
        <div>
            <div className="grid gap-x-10 sm:grid-cols-1 sm:gap-y-5 lg:grid-cols-[7fr_4fr]">
                {firstRow?.map((item, index) => (
                    <div key={index} className={cn(!index && "border-style")}>
                        <CityItem data={item} type={!index ? "large" : "default"} showCategoryInRow />
                    </div>
                ))}
            </div>
            {!!row?.length && (
                <div className="mt-5 grid gap-x-10 gap-y-5 border-t pt-5 lg:grid-cols-4">
                    {row.map((item, index) => {
                        const lastRow = (index + 1) % 4 === 0;
                        return (
                            <Fragment key={index}>
                                <div className={cn(!lastRow && "border-style")}>
                                    <CityItem data={item} type="small" />
                                </div>
                                {lastRow && <Separator className="last:hidden lg:col-span-4" />}
                            </Fragment>
                        );
                    })}
                </div>
            )}

            {hasMore && (
                <button
                    className="text-client-red relative mt-4 flex w-fit items-center gap-2 text-sm tracking-wider"
                    disabled={isFetching}
                    onClick={onLoadMoreClick}
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 512 512"
                        className="size-3 shrink-0"
                        fill="currentColor"
                    >
                        <path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z" />
                    </svg>

                    <span className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline">
                        flere resultater
                    </span>
                    {isFetching && <Loader2 className="size-5 animate-spin" />}
                </button>
            )}
        </div>
    );
}