import {
  InfoWindow as GoogleMapsInfoWindow,
  type InfoWindowProps as GoogleMapsInfoWindowProps,
} from "@vis.gl/react-google-maps"

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

import type { MouseEventHandler } from "react"

interface InfoWindowProps extends React.PropsWithChildren<
  Omit<GoogleMapsInfoWindowProps, "pixelOffset">
> {
  pixelOffsetY?: number
  onMouseEnter?: MouseEventHandler<HTMLDivElement>
  onMouseLeave?: MouseEventHandler<HTMLDivElement>
}

export function InfoWindow({
  children,
  pixelOffsetY = -12,
  onMouseEnter,
  onMouseLeave,
  ...options
}: InfoWindowProps) {
  function onMouseEnterHandler(e: React.MouseEvent<HTMLDivElement>) {
    if (onMouseEnter) {
      onMouseEnter(e)
    }
  }

  function onMouseLeaveHandler(e: React.MouseEvent<HTMLDivElement>) {
    if (onMouseLeave) {
      onMouseLeave(e)
    }
  }

  return (
    <GoogleMapsInfoWindow {...options}>
      <div
        className={styles.infoWindow}
        onMouseEnter={onMouseEnterHandler}
        onMouseLeave={onMouseLeaveHandler}
        style={{ paddingBottom: pixelOffsetY ? `${pixelOffsetY * -1}px` : 0 }}
      >
        <div className={styles.content}>{children}</div>
        <span className={styles.arrow} />
      </div>
    </GoogleMapsInfoWindow>
  )
}