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

export default function TopMenu({ items = [], activeKey = '', onChange }) {
  const [active, setActive] = useState(activeKey);

  function isActive(it) {
    if (it.key === active) return true;
    return (it.children || []).some(s => s.key === active);
  }
  function select(it) {
    if (!it.children) {
      setActive(it.key);
      onChange && onChange(it.key);
    }
  }

  return (
    <div className="aa-topmenu">
      {items.map((it, i) => (
        <div
          key={i}
          className={'aa-topmenu-item' + (isActive(it) ? ' is-active' : '')}
          onClick={() => select(it)}
        >
          <span>{it.label}</span>
          {it.badge ? <span className="aa-topmenu-badge">{it.badge}</span> : null}
          {it.children ? <span className="aa-topmenu-caret">▾</span> : null}
          {it.children ? (
            <div className="aa-topmenu-dropdown">
              {it.children.map((s, si) => (
                <a
                  key={si}
                  className={'aa-topmenu-sub' + (s.key === active ? ' is-active' : '')}
                  onClick={e => { e.stopPropagation(); select(s); }}
                >
                  {s.label}
                </a>
              ))}
            </div>
          ) : null}
        </div>
      ))}
    </div>
  );
}