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

/* 消息通知（移动端）— 规格 §42
   顶部居中、不阻断操作（根是 pointer-events: none，只有关闭按钮自己接收手势）。
   **两种用法**：
   ① 组件形态（本文件导出的即此形态）：受控 open + 内容 props，计时到点回传 onClose；
   ② 命令式调用：宿主自己维护一个列表与定时器（见规格 §42.5），本组件不提供全局方法 ——
      命令式 API 需要单例容器与跨端定时器，属于宿主或框架层的职责（规格 §42.7）。
   本组件只暴露组件形态的 props / events。 */
export default function Message({
  tone = 'info',
  open = false,
  text = '',
  duration = 3000,
  closable = false,
  onClose,
  children = null,
}) {
  /* 自动消失：计时归宿主（duration 由调用方决定），组件只负责「到点回传 close」。
     duration=0 表示不自动关闭。open / duration 变化时重新计时。
     回调放 ref：把 onClose 写进依赖会让「宿主传内联箭头函数」的常见写法每次渲染都重置计时器，
     计时永远到不了点（定时器形同虚设），而这不是调用方的错。 */
  const closeRef = useRef(onClose);
  closeRef.current = onClose;
  useEffect(() => {
    if (!open || !duration) return undefined;
    const timer = setTimeout(() => {
      if (closeRef.current) closeRef.current();
    }, duration);
    return () => clearTimeout(timer);
  }, [open, duration]);

  const cls = 'kole-m-message__item kole-m-message__item--' + tone + (open ? ' is-open' : '');

  return (
    <div className="kole-m-message">
      <div className={cls} role="status" aria-live="polite" data-open={open ? 'true' : 'false'}>
        <span className="kole-m-message__icon" aria-hidden="true">
          {tone === 'success' ? '✓' : tone === 'warning' ? '⚠' : tone === 'error' ? '✕' : 'ℹ'}
        </span>
        <span className="kole-m-message__text">{text || children}</span>
        {closable ? (
          <button
            className="kole-m-message__close"
            type="button"
            aria-label="关闭消息"
            onClick={() => {
              if (onClose) onClose();
            }}
          >
            ✕
          </button>
        ) : null}
      </div>
    </div>
  );
}