import React, { useEffect, useRef } from 'react';
import './Popover.css';

/* 弹出气泡（移动端）— 规格 §41
   由触发元素定位：根是 relative 的包一层，面板在其中绝对定位，因此气泡永远贴着自己的触发器，
   不铺满视口。四个方向靠 placement；箭头是纯 CSS 三角。
   点击外部关闭：气泡没有遮罩可依赖，因此由本端监听 document 的 pointerdown 判定
   「落点既不在面板内、也不在触发器内」时回传 onClose。宿主不采纳时视觉不变（受控）。 */
export default function Popover({
  open = false,
  placement = 'bottom',
  triggerText = '',
  title = '',
  text = '',
  arrow = true,
  closeOnOutside = true,
  onToggle,
  onClose,
  children = null,
}) {
  const rootRef = useRef(null);

  useEffect(() => {
    if (!open || !closeOnOutside) return undefined;
    function onDocPointerDown(e) {
      const root = rootRef.current;
      if (root && e.target && root.contains(e.target)) return;
      if (onClose) onClose();
    }
    document.addEventListener('pointerdown', onDocPointerDown);
    return () => document.removeEventListener('pointerdown', onDocPointerDown);
  }, [open, closeOnOutside, onClose]);

  const panelCls =
    'kole-m-popover__panel' +
    ` kole-m-popover__panel--${placement}` +
    (arrow ? ' kole-m-popover__panel--arrow' : '') +
    (open ? ' is-open' : '');

  return (
    <div className="kole-m-popover" ref={rootRef} data-placement={placement} data-open={open ? 'true' : 'false'}>
      <button
        className="kole-m-popover__trigger"
        type="button"
        aria-expanded={open ? 'true' : 'false'}
        aria-haspopup="dialog"
        onClick={() => {
          if (onToggle) onToggle();
        }}
      >
        {triggerText}
      </button>
      <div className={panelCls} role="dialog" aria-label={title || triggerText || undefined}>
        {title ? <p className="kole-m-popover__title">{title}</p> : null}
        {text ? <p className="kole-m-popover__text">{text}</p> : null}
        {children}
      </div>
    </div>
  );
}