import { cn } from "@/lib/utils/cn";
import { Circle, Share2 } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import PostTag from "../post-tag";
import formatDate from "@/lib/utils/format-date";
import { ArticleList } from "@/features/posts/_lib/transformers";
import { TopicsEnum } from "@/config/enums";
import { ImageQuality } from "@/config/enums/image-quality";

export default function CityItem({
    type = "default",
    showCategoryInRow = false,
    data
}: {
    type: "default" | "large" | "small" | "list";
    showCategoryInRow?: boolean;
    data: ArticleList[number];
}) {
    const isLarge = type === "large";
    const isSmall = type === "small";
    const isKBHPlus = data.topic === TopicsEnum.KBHPLUS;
    const isCityHouse = data.topic === TopicsEnum.CITY_HOUSE;
    const isCityLife = data.topic === TopicsEnum.CITY_LIFE;
    if (type === "list") {
        return (
            <article className="relative size-full text-neutral-800">
                {data.preview?.url && (
                    <Image
                        src={data.preview?.url}
                        alt={data.preview?.caption || "Artikel billede"}
                        width={1000}
                        height={600}
                        className="w-full object-cover sm:aspect-3/2"
                        quality={ImageQuality.LOW}
                    />
                )}

                <div className="grow pb-5">
                    <div className="mt-3 mb-4 flex flex-col">
                        <span className="label-text text-neutral-500 uppercase">
                            <Circle
                                className={cn(
                                    "stroke-client-red fill-client-red mr-1 mb-1 inline size-3",
                                    isCityHouse && "stroke-client-dark-sky fill-client-dark-sky",
                                    isCityLife && "fill-client-orange stroke-client-orange"
                                )}
                            />
                            {isKBHPlus ? "KBH+" : data.topic?.replace("-", " ")}
                        </span>
                        {data.city?.name && (
                            <Link className="label-text relative z-10 text-neutral-500 uppercase" href={data.city.url}>
                                <svg
                                    id="map-pin"
                                    className={cn(
                                        "fill-client-red mr-0.5 mb-0.5 inline size-3",
                                        isCityHouse && "fill-client-dark-sky",
                                        isCityLife && "fill-client-orange"
                                    )}
                                    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 className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline">
                                    {data.city.name}
                                </span>
                            </Link>
                        )}
                    </div>
                    {!!data.createdAt && (
                        <span className="label-text mb-2.5 block uppercase">{formatDate(data.createdAt)}</span>
                    )}
                    <PostTag data={data.primaryTag} />
                    <h5 className="my-2 mb-5 text-[26px] leading-[1.1] font-semibold">
                        <Link
                            href={data.url}
                            className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                            dangerouslySetInnerHTML={{ __html: data.title }}
                        />
                    </h5>
                </div>
            </article>
        );
    }

    return (
        <article className="relative size-full text-neutral-800 sm:max-lg:flex sm:max-lg:gap-2">
            {data.preview?.url && (
                <Image
                    src={data.preview?.url}
                    alt={data.preview?.caption || "Artikel billede"}
                    width={1000}
                    height={600}
                    className="w-full object-cover sm:max-lg:max-w-[calc(50%-6px)] lg:aspect-3/2"
                    quality={ImageQuality.LOW}
                />
            )}

            <div className="grow pb-5">
                <div className="flex justify-between">
                    <div className={cn("mt-3 mb-5 flex flex-col", showCategoryInRow && "flex-row flex-wrap gap-x-2")}>
                        <span className="label-text text-neutral-500 uppercase">
                            <Circle
                                className={cn(
                                    "stroke-client-red fill-client-red mr-1 mb-1 inline size-3",
                                    isCityHouse && "stroke-client-dark-sky fill-client-dark-sky",
                                    isCityLife && "fill-client-orange stroke-client-orange"
                                )}
                            />
                            {isKBHPlus ? "KBH+" : data.topic?.replace("-", " ")}
                        </span>
                        {data.city?.name && (
                            <Link className="label-text relative z-10 text-neutral-500 uppercase" href={data.city.url}>
                                <svg
                                    id="map-pin"
                                    className={cn(
                                        "fill-client-red mr-1 mb-0.5 inline size-3",
                                        isCityHouse && "fill-client-dark-sky",
                                        isCityLife && "fill-client-orange"
                                    )}
                                    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 className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline">
                                    {data.city.name}
                                </span>
                            </Link>
                        )}
                    </div>
                    {!isSmall && (
                        <div className="ml-auto flex h-fit min-w-10 flex-col items-center gap-1.5 bg-neutral-300 px-1 pt-2 pb-1">
                            <Share2 className="fill-client-red stroke-client-red size-4" />
                            <span className="font-serif text-sm text-white">{data.stats.shares}</span>
                        </div>
                    )}
                </div>
                {!!data.createdAt && isSmall && (
                    <span className="label-text mb-2.5 block uppercase">{formatDate(data.createdAt)}</span>
                )}
                <PostTag data={data.primaryTag} />
                <h5 className={cn("my-2 mb-5 text-[26px] leading-[1.1] font-semibold", isLarge && "lg:text-4xl")}>
                    <Link
                        href={data.url}
                        className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                        dangerouslySetInnerHTML={{ __html: data.title }}
                    />
                </h5>

                {!isSmall && <p>{data.description.replaceAll("&shy;", "\u00AD")}</p>}
            </div>
        </article>
    );
}