"use client";
import { useMapStore } from "@/components/shared/map/map-store";
import { TopicsEnum } from "@/config/enums";
import { ArticleList, transformPostToArticle } from "@/features/posts/_lib/transformers";
import { api } from "@/lib/trpc/client";
import { cn } from "@/lib/utils";
import Image from "next/image";
import { useCallback } from "react";

export default function SliderItem({ data }: { data: ArticleList[number] }) {
    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 { setPopupData, setActiveMarker, reset } = useMapStore();

    const utils = api.useUtils();

    const onSlideClick = useCallback(
        async (data: ArticleList[number]) => {
            if (!data.lat || !data.lng) return;
            setActiveMarker({
                id: data.id,
                lat: data.lat,
                lng: data.lng,
                topic: data.topic
            });
            const response = await utils.posts.get.fetch({
                id: data.id
            });
            if (!response) {
                reset();
                return;
            }
            setPopupData(transformPostToArticle(response));
        },
        [utils, reset, setPopupData, setActiveMarker]
    );

    return (
        <div
            onClick={() => onSlideClick(data)}
            className={cn(
                "border-t-client-red relative cursor-pointer border-t hover:[&_h5]:underline",
                isCityLife && "border-t-client-orange",
                isOpinion && "border-t-client-green",
                isPhoto && "border-t-black",
                isProject && "border-t-neutral-600",
                isVision && "border-t-client-blue"
            )}
        >
            {data.preview?.url && (
                <Image
                    src={data.preview?.url}
                    alt={data.preview?.caption || "Article image"}
                    width={300}
                    height={600}
                    className="aspect-3/2 w-full"
                />
            )}
            <div className="bg-neutral-50 px-3 pt-2.5 pb-4">
                {data.city.name && (
                    <div className="label-text relative z-10 text-neutral-600 uppercase">
                        <svg
                            id="map-pin"
                            className={cn(
                                "fill-client-red mr-0.5 mb-0.5 inline size-3",
                                isCityLife && "fill-client-orange",
                                isOpinion && "fill-client-green",
                                isPhoto && "fill-black",
                                isProject && "fill-neutral-600",
                                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>{data.city.name}</span>
                    </div>
                )}
                <h5
                    className="mt-3 text-base leading-[1.1] font-semibold xl:text-lg"
                    dangerouslySetInnerHTML={{ __html: data.title }}
                />
            </div>
        </div>
    );
}