import { RateChart } from "@/components/chart";
import { ImageQuality } from "@/config/enums/image-quality";
import { cn } from "@/lib/utils/cn";
import { ArticleList } from "@/features/posts/_lib/transformers";
import Image from "next/image";
import Link from "next/link";

export default function VisionItem({
    data,
    type
}: {
    data: ArticleList[number];
    type?: "large" | "medium" | "medium-inline" | "small";
}) {
    if (type === "large") {
        return (
            <article className={cn("relative md:flex", data.vision?.isChosen && "bg-blue-50 pt-7")}>
                {data.vision?.isChosen && chosenLabel()}
                {data.preview?.url && (
                    <Image
                        src={data.preview?.url}
                        alt={data.preview?.caption || "Vision image"}
                        width={1000}
                        height={600}
                        className="w-full shrink-0 grow object-cover md:aspect-3/2 md:w-[63%]"
                        quality={ImageQuality.MEDIUM}
                    />
                )}
                <div className="border-t-client-blue border-t p-3">
                    <div>
                        <span className="label-text mb-4 inline-block text-neutral-600 uppercase">
                            {data.vision?.tag}
                        </span>
                        <h3 className="mb-5 text-[26px] leading-none font-semibold text-neutral-800 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"
                            >
                                {data.title}
                            </Link>
                        </h3>
                        {data.city.name && (
                            <Link
                                className="label-text relative z-10 mb-5 flex gap-1 text-neutral-500 uppercase"
                                href={data.city.url}
                            >
                                <svg
                                    id="map-pin"
                                    className="fill-client-blue 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 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.vision?.percent && (
                        <div className="flex justify-center">
                            <RateChart
                                value={data.vision.percent}
                                fillColor="var(--color-client-blue)"
                                emptyColor="var(--color-gray-200)"
                                className="size-28 lg:size-34"
                            />
                        </div>
                    )}
                </div>
            </article>
        );
    }

    if (type === "medium") {
        return (
            <article className={cn("relative bg-neutral-100", data.vision?.isChosen && "bg-blue-50")}>
                {data.vision?.isChosen && chosenLabel()}
                {data.preview?.url && (
                    <Image
                        src={data.preview?.url}
                        alt={data.preview?.caption || "Vision image"}
                        width={1000}
                        height={600}
                        className="aspect-3/2 w-full object-cover"
                        quality={ImageQuality.LOW}
                    />
                )}
                <div className="gap-5 p-3 md:flex md:items-center md:justify-between">
                    <div>
                        <span className="label-text mb-4 inline-block text-neutral-600 uppercase">
                            {data.vision?.tag}
                        </span>
                        <h3 className="mb-5 text-[26px] leading-none font-semibold text-neutral-800 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"
                            >
                                {data.title}
                            </Link>
                        </h3>
                        {data.city.name && (
                            <Link
                                className="label-text relative z-10 mb-5 flex gap-1 text-neutral-500 uppercase"
                                href={data.city.url}
                            >
                                <svg
                                    id="map-pin"
                                    className="fill-client-blue 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 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.vision?.percent && (
                        <div className="flex justify-center lg:pr-5">
                            <RateChart
                                value={data.vision.percent}
                                fillColor="var(--color-client-blue)"
                                emptyColor="var(--color-gray-200)"
                                className="size-28"
                            />
                        </div>
                    )}
                </div>
            </article>
        );
    }

    if (type === "medium-inline") {
        return (
            <article
                className={cn(
                    "border-t-client-blue relative border-t bg-neutral-100 md:flex md:items-start",
                    data.vision?.isChosen && "bg-blue-50 pt-7"
                )}
            >
                {data.vision?.isChosen && chosenLabel()}
                {data.preview?.url && (
                    <Image
                        src={data.preview?.url}
                        alt={data.preview?.caption || "Vision image"}
                        width={1000}
                        height={600}
                        className="w-full grow object-cover md:aspect-3/2 md:w-[39%]"
                        quality={ImageQuality.LOW}
                    />
                )}
                <div className="w-full gap-5 p-3 md:flex md:items-center md:justify-between">
                    <div>
                        <span className="label-text mb-4 inline-block text-neutral-600 uppercase">
                            {data.vision?.tag}
                        </span>
                        <h3 className="mb-5 text-[26px] leading-none font-semibold text-neutral-800 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"
                            >
                                {data.title}
                            </Link>
                        </h3>
                        {data.city.name && (
                            <Link
                                className="label-text relative z-10 mb-5 flex gap-1 text-neutral-500 uppercase"
                                href={data.city.url}
                            >
                                <svg
                                    id="map-pin"
                                    className="fill-client-blue 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 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.vision?.percent && (
                        <div className="flex justify-center lg:pr-8">
                            <RateChart
                                value={data.vision.percent}
                                fillColor="var(--color-client-blue)"
                                emptyColor="var(--color-gray-200)"
                                className="size-28 lg:size-34"
                            />
                        </div>
                    )}
                </div>
            </article>
        );
    }

    if (type === "small") {
        return (
            <article className="relative flex gap-3">
                {!!data.vision?.percent && (
                    <div className="flex justify-center">
                        <RateChart
                            value={data.vision.percent}
                            hideValue
                            fillColor="var(--color-client-blue)"
                            emptyColor="var(--color-gray-200)"
                            className="size-12"
                        />
                    </div>
                )}
                <div className="border-b-client-blue grow gap-5 border-b">
                    <h5 className="my-2 gap-5 leading-none font-semibold text-neutral-800">
                        <Link
                            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>
                    </h5>
                </div>
            </article>
        );
    }

    return (
        <article className={cn("relative h-full", data.vision?.isChosen && "bg-blue-50")}>
            {data.vision?.isChosen && chosenLabel()}
            {data.preview?.url && (
                <Image
                    src={data.preview?.url}
                    alt={data.preview?.caption || "Vision image"}
                    width={1000}
                    height={600}
                    className="aspect-3/2 w-full object-cover"
                    quality={ImageQuality.LOW}
                />
            )}
            <div className={cn("py-3", data.vision?.isChosen && "px-2")}>
                <div>
                    <span className="label-text mb-4 inline-block text-neutral-600 uppercase">{data.vision?.tag}</span>
                    <h3 className="mb-5 text-[26px] leading-none font-semibold text-neutral-800">
                        <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 }}
                        />
                    </h3>
                    {data.city.name && (
                        <Link
                            className="label-text relative z-10 mb-5 flex gap-1 text-neutral-500 uppercase"
                            href={data.city.url}
                        >
                            <svg
                                id="map-pin"
                                className="fill-client-blue 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 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.vision?.percent && (
                    <div className="flex justify-center lg:pr-5">
                        <RateChart
                            value={data.vision.percent}
                            fillColor="var(--color-client-blue)"
                            emptyColor="var(--color-gray-200)"
                            className="size-28"
                        />
                    </div>
                )}
            </div>
        </article>
    );
}

const chosenLabel = () => (
    <span className="bg-client-blue absolute top-0 left-0 z-1 w-full px-2 py-1 text-sm tracking-wide text-white uppercase">
        REDAKTIONENS UDVALGTE
    </span>
);