/**
 * Created by jiangzhixiong on 2024/05/23
 */
import React, { forwardRef, useContext, useImperativeHandle } from 'react'
import {
  Popup as MapboxPopUp,
  PopupProps as MapboxPopupProps
} from 'react-map-gl'
import { ConfigProvider, Image } from '@zhst/meta'
import './index.less'
import classNames from 'classnames'

const { ConfigContext } = ConfigProvider

export interface PopUpProps extends MapboxPopupProps {
  prefixCls?: string;
  size?: number;
  title?: string;
  url?: string;
  content?: string;
}

export interface PopUpRefProps {
}

const PopUp = forwardRef<PopUpRefProps, PopUpProps>((props, ref) => {
  const {
    longitude,
    latitude,
    onClose,
    title,
    content,
    url,
    prefixCls: customizePrefixCls
  } = props
  const { getPrefixCls } = useContext(ConfigContext)
  const componentName = getPrefixCls('map-popup', customizePrefixCls);

  useImperativeHandle(ref, () => ({}))

  return (
    <MapboxPopUp
      anchor="top"
      className={componentName}
      longitude={Number(longitude)}
      latitude={Number(latitude)}
      onClose={onClose}
    >
      <div className={classNames(`${componentName}-container`)}>
        {title && <h2>{title}</h2>}
        {url && <Image src={url} />}
        {content && <p>{content}</p>}
      </div>
    </MapboxPopUp>
  )
})

export default PopUp