import React, { useState } from 'react';
import './TopMenu.css';

/* Kole UI Menu 族 · TopMenu（React）
 * @generated by tools/gen-family-impl.mjs
 * 生成物 - 由 tools/gen-family-impl.mjs 从族模板生成，请勿手改。
 * 族 nav-menu：本组件是同一份 Menu 实现，参数 direction=top。
 * 族参数取值：direction=top, indicator=top, collapsed=false
 * 重跑生成：node tools/gen-family-impl.mjs nav-menu
 */
const FAMILY_DIRECTION = 'top';
const FAMILY_PARAMS = { direction: FAMILY_DIRECTION, collapsed: false };

export default function TopMenu({ items = [], activeKey = '', onChange }) {
  const [active, setActive] = useState(activeKey);
  const [open, setOpen] = useState('');
  const [hoverKey, setHoverKey] = useState('');
  const [collapsed, setCollapsed] = useState(FAMILY_PARAMS.collapsed === true);

  const params = FAMILY_PARAMS;
  const isTopActive = (it) => it.key === active || (it.children || []).some((c) => c.key === active);

  function select(it) {
    if (it.disabled) return;
    if (it.children && it.children.length) {
      setOpen(open === it.key ? '' : it.key);
      if (params.direction === 'mixed') setActive(it.key);
      return;
    }
    setActive(it.key);
    onChange && onChange(it.key);
  }

  function renderItem(it) {
    const hasKids = !!(it.children && it.children.length);
    return (
      <div
        key={it.key}
        className={
          'kole-menu-item' +
          (it.key === active ? ' is-active' : '') +
          (it.disabled ? ' is-disabled' : '') +
          (hasKids && it.key === open ? ' is-open' : '')
        }
        role="menuitem"
        tabIndex={0}
        aria-expanded={hasKids ? (it.key === open ? 'true' : 'false') : undefined}
        onClick={() => select(it)}
        onMouseEnter={() => params.direction === 'side' && setHoverKey(it.key)}
        onMouseLeave={() => {
          if (params.direction === 'side') setHoverKey('');
        }}
      >
        {it.icon ? <span className="kole-menu-icon">{it.icon}</span> : null}
        <span className="kole-menu-label">{it.label}</span>
        {it.badge ? <span className="kole-menu-badge">{it.badge}</span> : null}
        {hasKids && params.direction !== 'top' ? <span className="kole-menu-arrow">{'\u203A'}</span> : null}
        {hasKids && params.direction !== 'mixed' ? (
          <div className="kole-menu-children">{it.children.map((c) => renderItem(c))}</div>
        ) : null}
      </div>
    );
  }

  function renderPop() {
    if (params.direction !== 'side' || !collapsed || !hoverKey) return null;
    const it = items.filter((x) => x.key === hoverKey)[0];
    if (!it || !it.children) return null;
    return (
      <div className="kole-menu-pop">
        <div className="kole-menu-pop-title">{it.label}</div>
        {it.children.map((c) => renderItem(c))}
      </div>
    );
  }

  function renderBody() {
    if (params.direction !== 'mixed') return items.map((it) => renderItem(it));
    const current = items.filter((x) => isTopActive(x))[0] || items[0] || { children: [] };
    return (
      <React.Fragment>
        <div className="kole-menu-top">{items.map((it) => renderItem(it))}</div>
        <div className="kole-menu-side">{(current.children || []).map((c) => renderItem(c))}</div>
      </React.Fragment>
    );
  }

  return (
    <nav
      className="kole-menu"
      data-direction={params.direction}
      data-collapsed={params.direction === 'side' ? (collapsed ? 'true' : 'false') : undefined}
      aria-label="主菜单"
    >
      {renderBody()}
      {renderPop()}
    </nav>
  );
}