import {
  AdvancedMarker,
  AdvancedMarkerAnchorPoint,
} from "@vis.gl/react-google-maps"
import { memo, useCallback, useState } from "react"

import HotelCardDialog from "@/components/HotelReservation/HotelCardDialog"
import Body from "@/components/TempDesignSystem/Text/Body"

import HotelMarker from "../../Markers/HotelMarker"

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

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

function HotelListingMapContent({
  activeHotelPin,
  hotelPins,
  onActiveHotelPinChange,
}: HotelListingMapContentProps) {
  const [hoveredHotelPin, setHoveredHotelPin] = useState<string | null>(null)

  const toggleActiveHotelPin = useCallback(
    (pinName: string | null) => {
      if (onActiveHotelPinChange) {
        const newActivePin = activeHotelPin === pinName ? null : pinName
        onActiveHotelPinChange(newActivePin)
        if (newActivePin === null) {
          setHoveredHotelPin(null)
        }
      }
    },
    [activeHotelPin, onActiveHotelPinChange]
  )

  const handleHover = useCallback(
    (pinName: string | null) => {
      if (pinName !== null && activeHotelPin !== pinName) {
        setHoveredHotelPin(pinName)
        if (activeHotelPin && onActiveHotelPinChange) {
          onActiveHotelPinChange(null)
        }
      } else if (pinName === null) {
        setHoveredHotelPin(null)
      }
    },
    [activeHotelPin, onActiveHotelPinChange]
  )

  return (
    <div>
      {hotelPins.map((pin) => {
        const isActiveOrHovered =
          activeHotelPin === pin.name || hoveredHotelPin === pin.name
        return (
          <AdvancedMarker
            key={pin.name}
            className={styles.advancedMarker}
            position={pin.coordinates}
            anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
            zIndex={isActiveOrHovered ? 2 : 0}
            onMouseEnter={() => handleHover(pin.name)}
            onMouseLeave={() => handleHover(null)}
            onClick={() => toggleActiveHotelPin(pin.name)}
          >
            <div className={styles.dialogContainer}>
              <HotelCardDialog
                isOpen={isActiveOrHovered}
                handleClose={(event: { stopPropagation: () => void }) => {
                  event.stopPropagation()
                  if (activeHotelPin === pin.name) {
                    toggleActiveHotelPin(null)
                  }
                }}
                data={pin}
              />
            </div>
            <span
              className={`${styles.pin} ${isActiveOrHovered ? styles.active : ""}`}
            >
              <span className={styles.pinIcon}>
                <HotelMarker
                  width={16}
                  color={isActiveOrHovered ? "burgundy" : "white"}
                />
              </span>
              <Body
                asChild
                color={isActiveOrHovered ? "white" : "baseTextHighContrast"}
              >
                <span>
                  {pin.memberPrice} {pin.currency}
                </span>
              </Body>
            </span>
          </AdvancedMarker>
        )
      })}
    </div>
  )
}

export default HotelListingMapContent
