"use client";

import { cn } from "@/lib/utils";
import { TopicsEnum } from "@/config/enums";
import Link from "next/link";
import { ArticleProps } from "../../types/types";
import { transformPostToArticle } from "@/features/posts/_lib/transformers";
import { Circle } from "lucide-react";
import Image from "next/image";
import { ImageQuality } from "@/config/enums/image-quality";
import { api } from "@/lib/trpc/client";

export default function ArticleWidget({ props, isNodeView = false }: { props: ArticleProps; isNodeView?: boolean }) {
    const { postId } = props;

    const { data: post } = api.posts.get.useQuery({
        id: postId
    });

    if (!post) {
        return null;
    }

    const data = transformPostToArticle(post);

    const isPhoto = data.topic === TopicsEnum.PHOTO;
    const isCityLife = data.topic === TopicsEnum.CITY_LIFE;
    const isOpinion = data.topic === TopicsEnum.OPINION;
    const isProject = data.topic === TopicsEnum.PROJECT;
    const isVision = data.topic === TopicsEnum.VISIONS;
    const isKBHPlus = data.topic === TopicsEnum.KBHPLUS;

    return (
        <div className={cn(!isNodeView && "widget-left-col")}>
            <article
                className={cn(
                    "border-t-client-red bg-client-pink relative size-full border-t text-neutral-800",
                    (isPhoto || isCityLife) && "border-t-client-orange bg-orange-50",
                    isOpinion && "border-t-client-green bg-green-50",
                    isProject && "border-t-black bg-neutral-100",
                    isVision && "border-t-client-blue bg-blue-50"
                )}
            >
                {data.preview?.url && (
                    <Image
                        src={data.preview?.url}
                        alt={data.preview?.alt || data.preview?.caption || "artikelbillede"}
                        width={1000}
                        height={600}
                        quality={ImageQuality.MEDIUM}
                        className="aspect-3/2 w-full object-cover"
                    />
                )}
                <div className="grow p-2.5">
                    <div className="flex justify-between">
                        <div className="flex flex-wrap gap-x-4">
                            <span className="label-text uppercase">
                                <Circle
                                    className={cn(
                                        "stroke-client-red fill-client-red mr-1 mb-1 inline size-2.5",
                                        (isPhoto || isCityLife) && "fill-client-orange stroke-client-orange",
                                        isOpinion && "stroke-client-green fill-client-green",
                                        isProject && "fill-black stroke-black",
                                        isVision && "fill-client-blue stroke-client-blue"
                                    )}
                                />
                                {isKBHPlus ? "KBH+" : data.topic?.replace("-", " ")}
                            </span>
                            {data.city.name && (
                                <Link className="label-text relative z-10 uppercase" href={data.city.url}>
                                    <svg
                                        id="map-pin"
                                        className={cn(
                                            "fill-client-red mr-0.5 mb-0.5 inline size-3",
                                            (isPhoto || isCityLife) && "fill-client-orange",
                                            isOpinion && "fill-client-green",
                                            isProject && "fill-black",
                                            isVision && "fill-client-blue"
                                        )}
                                        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>
                    </div>
                    <h6
                        className={cn(
                            "mt-2.5 mb-4 text-lg leading-[1.1] font-semibold md:text-[26px]",
                            isNodeView && "md:text-lg"
                        )}
                    >
                        <Link
                            target="_blank"
                            href={data.url}
                            className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                        >
                            {data.title}
                        </Link>
                    </h6>
                    <span
                        className={cn(
                            "text-client-red flex items-center gap-1.5 text-sm tracking-widest",
                            (isPhoto || isCityLife) && "text-client-orange",
                            isOpinion && "text-teal-700",
                            isProject && "text-black",
                            isVision && "text-client-blue"
                        )}
                    >
                        <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>læs</span>
                    </span>
                </div>
            </article>
        </div>
    );
}