"use client";
import { widgetAlign } from "@/config/enums/tip-tap";
import { cn } from "@/lib/utils";
import { MapProps } from "../../types/types";
import MapWrapper from "@/components/shared/map/map-wrapper";
import { api } from "@/lib/trpc/client";
import { TopicsEnum } from "@/config/enums";
import Link from "next/link";
import { Routes } from "@/config/routes";

export default function MapWidget({ props }: { props: MapProps }) {
    if (!props) {
        return null;
    }
    const { title, description, variant, postId } = props;

    const { data: markers = [] } = api.posts.getGeolocations.useQuery({
        id: postId
    });

    if (!markers.length) {
        return null;
    }

    const marker = markers[0];

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

    return (
        <div className={cn("map", widgetAlign[variant])}>
            <div
                className={cn(
                    "border-t-client-red bg-client-pink border-t p-3",
                    (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"
                )}
            >
                <div className='mb-2 flex items-center gap-1 font-medium'>
                    <svg
                        id='map-pin'
                        className={cn(
                            "fill-client-red 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>Kort</span>
                </div>
                {title && (
                    <h6
                        className={cn(
                            "text-client-red font-medium",
                            (isPhoto || isCityLife) && "text-client-orange",
                            isOpinion && "text-teal-700",
                            isProject && "text-black",
                            isVision && "text-client-blue"
                        )}
                    >
                        {title}
                    </h6>
                )}
                {description && <p className='text-muted-foreground !m-0 text-sm'>{description}</p>}

                <div className='relative mt-4 mb-3 h-80'>
                    <MapWrapper data={markers} disableMarkerClick />
                </div>

                <Link
                    href={`${Routes.MAP}?preselectId=${marker.id}`}
                    target='_blank'
                    className={cn(
                        "text-client-red flex items-center gap-2 text-sm",
                        (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 className='hover:underline'>stort kort</span>
                </Link>
            </div>
        </div>
    );
}