"use client";
import { useEffect, useState, useTransition } from "react";
import { useSearchParams } from "next/navigation";
import Image from "next/image";
import Link from "next/link";
import { Building, Clock, Loader2 } from "lucide-react";
import { api } from "@/lib/trpc/client";
import { parseEnum } from "@/lib/utils/parse-enum";
import { TopicsEnum, DistrictsEnum, ProjectTypeEnum, ProjectStatusEnum, PostOrderEnum } from "@/config/enums";
import { transformPostsToArticleList } from "@/features/posts/_lib/transformers";

export default function ProjectList() {
    const searchParams = useSearchParams();

    const [loading, startTransition] = useTransition();
    const [hasMore, setHasMore] = useState(true);
    const [limit, setLimit] = useState(25);

    const { data: posts = [] } = api.posts.list.useQuery(
        {
            with: ["project"],
            topic: TopicsEnum.PROJECT,
            location: parseEnum(DistrictsEnum, searchParams.get("city")),
            projectType: parseEnum(ProjectTypeEnum, searchParams.get("type")),
            projectStatus: parseEnum(ProjectStatusEnum, searchParams.get("status")),
            orderBy: parseEnum(PostOrderEnum, searchParams.get("sort")),
            limit: limit
        },
        {
            select: transformPostsToArticleList,
            placeholderData: (prev) => prev
        }
    );

    const onLoadMoreClick = async () => {
        startTransition(async () => {
            setLimit(-1);
            setHasMore(false);
        });
    };

    useEffect(() => {
        setHasMore(true);
    }, [searchParams]);

    if (!posts.length) {
        return (
            <div className="my-6">
                <p className="text-lg font-medium">Ingen projekter fundet</p>
            </div>
        );
    }

    return (
        <div>
            <div className="my-6 grid gap-5 sm:grid-cols-2">
                {posts.map((item, index) => {
                    return (
                        <article key={index} className="relative flex flex-col bg-neutral-100">
                            <Image
                                src={item.preview?.url || ""}
                                width={400}
                                height={300}
                                alt={item.title || ""}
                                className="size-full object-cover sm:max-h-40"
                            />
                            <div className="flex h-full flex-col p-3">
                                {item.city.name && (
                                    <span className="label-text inline-block max-w-50 leading-none uppercase">
                                        <svg
                                            id="map-pin"
                                            className="fill-client-red mr-0.5 mb-0.5 inline size-3"
                                            width="64.615px"
                                            height="96.922px"
                                            viewBox="0 0 64.615 96.922"
                                        >
                                            <path
                                                d="M62.532,43.603L39.564,92.442c-1.325,2.776-4.228,4.48-7.257,4.48s-5.931-1.704-7.193-4.48L2.083,43.603
		C0.442,40.132,0,36.156,0,32.307C0,14.45,14.45,0,32.307,0c17.857,0,32.308,14.45,32.308,32.307
		C64.615,36.156,64.173,40.132,62.532,43.603z M32.307,16.154c-8.896,0-16.153,7.257-16.153,16.153
		c0,8.897,7.257,16.154,16.153,16.154c8.897,0,16.154-7.257,16.154-16.154C48.461,23.411,41.204,16.154,32.307,16.154z"
                                            />
                                        </svg>
                                        <span>{item.city.name}</span>
                                    </span>
                                )}
                                <h5 className="mt-3 mb-5 text-[26px] leading-[1.1] font-semibold">
                                    <Link
                                        href={item.url}
                                        className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                                    >
                                        {item.title}
                                    </Link>
                                </h5>
                                <div className="mt-auto flex flex-col gap-2">
                                    {item.project?.type && (
                                        <span className="text-sm leading-none font-medium text-neutral-800">
                                            <Building className="mr-1 inline size-5 stroke-neutral-800 align-sub" />
                                            <span>{item.project.type}</span>
                                        </span>
                                    )}
                                    {item.project?.status && (
                                        <span className="text-sm leading-none font-medium text-neutral-800">
                                            <Clock className="mr-1 inline size-5 stroke-neutral-800 align-sub" />
                                            <span>{item.project.status}</span>
                                        </span>
                                    )}
                                </div>
                            </div>
                        </article>
                    );
                })}
            </div>
            {hasMore && (
                <div>
                    <button
                        className="text-client-red relative mt-3 flex w-fit gap-2 text-sm font-semibold"
                        disabled={loading}
                        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">
                            se alle
                        </span>
                        {loading && <Loader2 className="size-5 animate-spin" />}
                    </button>
                </div>
            )}
        </div>
    );
}