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

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

import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
import InteractiveMap from "@/components/Maps/InteractiveMap"
import Button from "@/components/TempDesignSystem/Button"
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,
  isModal,
}: SelectHotelMapProps) {
  const router = useRouter()
  const lang = useLang()
  const intl = useIntl()
  const [activePoi, setActivePoi] = useState<string | null>(null)

  function handleModalDismiss() {
    router.back()
  }

  function handlePageRedirect() {
    router.push(
      `${selectHotel[lang]}?${new URLSearchParams(window.location.search)}`
    )
  }

  const closeButton = (
    <Button
      intent="inverted"
      size="small"
      theme="base"
      className={styles.closeButton}
      onClick={isModal ? handleModalDismiss : handlePageRedirect}
    >
      <CloseIcon color="burgundy" />
      {intl.formatMessage({ id: "Close the map" })}
    </Button>
  )
  return (
    <APIProvider apiKey={apiKey}>
      <div className={styles.container}>
        <div className={styles.filterContainer}>
          <Button
            intent="text"
            size="small"
            variant="icon"
            wrapping
            onClick={isModal ? handleModalDismiss : handlePageRedirect}
          >
            <CloseLargeIcon />
          </Button>
          <span>Filter and sort</span>
          {/* TODO: Add filter and sort button */}
        </div>
        <HotelListing />
        <InteractiveMap
          closeButton={closeButton}
          coordinates={coordinates}
          pointsOfInterest={pointsOfInterest}
          activePoi={activePoi}
          onActivePoiChange={setActivePoi}
          mapId={mapId}
        />
      </div>
    </APIProvider>
  )
}