"use client"

import Link from "next/link"
import { useParams } from "next/navigation"
import { useEffect, useState } from "react"
import { useIntl } from "react-intl"

import PoiMarker from "@/components/Maps/Markers/Poi"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import { trackHotelMapClick } from "@/utils/tracking"

import styles from "./mapCard.module.css"

import type { MapCardProps } from "@/types/components/hotelPage/map/mapCard"

export default function MapCard({ hotelName, pois }: MapCardProps) {
  const intl = useIntl()
  const params = useParams()
  const [mapUrl, setMapUrl] = useState<string | null>(null)

  useEffect(() => {
    const url = new URL(window.location.href)
    url.searchParams.set("view", "map")
    setMapUrl(url.toString())
  }, [params])

  return (
    <div className={styles.mapCard}>
      <Caption
        color="textMediumContrast"
        textTransform="uppercase"
        textAlign="center"
      >
        {intl.formatMessage({
          defaultMessage: "Nearby",
        })}
      </Caption>
      <Title
        color="burgundy"
        level="h3"
        as="h4"
        textAlign="center"
        textTransform="capitalize"
      >
        {hotelName}
      </Title>
      <ul className={styles.poiList}>
        {pois.map((poi) => (
          <li key={poi.name} className={styles.poiItem}>
            <PoiMarker
              group={poi.group}
              categoryName={poi.categoryName}
              skipBackground
              size={20}
            />
            <Body color="black">{poi.name}</Body>
            <Caption>
              {intl.formatMessage(
                {
                  defaultMessage: "{distanceInKm} km",
                },
                { distanceInKm: poi.distance }
              )}
            </Caption>
          </li>
        ))}
      </ul>

      {mapUrl ? (
        <Button theme="base" intent="secondary" size="small" fullWidth asChild>
          <Link href={mapUrl} scroll={true} onClick={trackHotelMapClick}>
            {intl.formatMessage({
              defaultMessage: "See map",
            })}
          </Link>
        </Button>
      ) : null}
    </div>
  )
}
