"use client";
import { cn } from "@/lib/utils";
import formatDate from "@/lib/utils/format-date";
import { Clock } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useParams } from "next/navigation";
import { useState, useCallback } from "react";
import { api } from "@/lib/trpc/client";
import { TopicsEnum } from "@/config/enums";

export default function RelatedPosts() {
    const { slug } = useParams();
    const [limit, setLimit] = useState(3);

    const { data: relatedPosts = [] } = api.posts.list.useQuery(
        {
            baseSlug: typeof slug === "string" ? slug : "",
            limit: limit
        },
        {
            placeholderData: (prev) => prev,
            select: (data) => {
                return data.map((related) => {
                    return {
                        id: related.id,
                        topic: related.topic,
                        title: related.title || "",
                        url: `/${related.topic}/${related.slug}`,
                        image: related.preview?.url || "",
                        date: related.createdAt
                    };
                });
            }
        }
    );

    const { data: total = 0 } = api.posts.count.useQuery({
        baseSlug: typeof slug === "string" ? slug : ""
    });

    const handleAll = useCallback(() => {
        setLimit(-1);
    }, []);

    return (
        <div>
            <ul className="flex flex-col gap-4">
                {relatedPosts.map((item, index) => {
                    const isPhoto = item.topic === TopicsEnum.PHOTO;
                    const isCityLife = item.topic === TopicsEnum.CITY_LIFE;
                    const isOpinion = item.topic === TopicsEnum.OPINION;
                    const isProject = item.topic === TopicsEnum.PROJECT;

                    return (
                        <li key={index}>
                            <article
                                className={cn(
                                    "border-client-red animate-fadeInUp relative min-h-28 border-t bg-neutral-50 text-black sm:flex",
                                    isPhoto && "border-client-orange bg-black text-white",
                                    isCityLife && "border-client-orange",
                                    isOpinion && "border-client-green",
                                    isProject && "border-neutral-500"
                                )}
                            >
                                {item.image && (
                                    <Image
                                        src={item.image}
                                        alt={item.title}
                                        width={600}
                                        height={400}
                                        className="object-cover sm:aspect-3/2 sm:max-w-35"
                                    />
                                )}
                                <div className="px-2.5 py-2">
                                    {!!item.date && (
                                        <span className="label-text mb-3 flex items-center gap-1.5 uppercase">
                                            <Clock
                                                className={cn(
                                                    "stroke-client-red size-2.5 align-middle",
                                                    (isPhoto || isCityLife) && "stroke-client-orange",
                                                    isOpinion && "stroke-client-green",
                                                    isProject && "stroke-black"
                                                )}
                                            />
                                            {formatDate(item.date)}
                                        </span>
                                    )}
                                    <h5 className="text-lg 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>
                            </article>
                        </li>
                    );
                })}
            </ul>
            {limit !== -1 && total > limit && (
                <button
                    className="text-client-red relative mt-4 flex w-fit items-center gap-2 text-sm tracking-wider"
                    onClick={handleAll}
                >
                    <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">
                        se flere
                    </span>
                </button>
            )}
        </div>
    );
}