"use client"
import { APIProvider } from "@vis.gl/react-google-maps"
import { useState } from "react"
import { useIntl } from "react-intl"

import { selectHotel } from "@/constants/routes/hotelReservation"

import { CloseIcon } from "@/components/Icons"
import InteractiveMap from "@/components/Maps/InteractiveMap"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"

import HotelListing from "./HotelListing"

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

import { SelectHotelMapProps } from "@/types/components/hotelReservation/selectHotel/map"

export default function SelectHotelMap({
  apiKey,
  coordinates,
  pointsOfInterest,
  mapId,
}: SelectHotelMapProps) {
  const lang = useLang()
  const intl = useIntl()
  const [activePoi, setActivePoi] = useState<string | null>(null)

  const closeButton = (
    <Button
      asChild
      intent="inverted"
      size="small"
      theme="base"
      className={styles.closeButton}
    >
      <Link href={selectHotel[lang]} keepSearchParams color="burgundy">
        <CloseIcon color="burgundy" />
        {intl.formatMessage({ id: "Close the map" })}
      </Link>
    </Button>
  )
  return (
    <APIProvider apiKey={apiKey}>
      <HotelListing />
      <InteractiveMap
        closeButton={closeButton}
        coordinates={coordinates}
        pointsOfInterest={pointsOfInterest}
        activePoi={activePoi}
        onActivePoiChange={setActivePoi}
        mapId={mapId}
      />
    </APIProvider>
  )
}