import React, { useState } from "react";

function Menu({ className, children, href, title }) {
  if (!children) {
    return <li className="venue-lvl">
      <a href={href ?? '#'}>
        <span>{title}</span>
      </a>
    </li>
  }
  const [open, setOpend] = useState('open');
  // if (className) className = 'group-lvl';
  // className = className ?? 'group-lvl';
  className ??= 'group-lvl';
  className = `${className} sub-nav ${open}`; //[className, 'sub-nav', open].join(' ')
  return <li className={className}>
    <a href={href ?? '#'} onClick={() => setOpend(open ? '' : 'open')} className="max-agency">
      <span>{title}</span>
    </a>
    {open && <ul id="venue-scope-options">
      {children}
    </ul>}
  </li>
}

export default function UserAuthoriySelect() {

  return (
    <div style={{ height: "100%" }}>
      <div class="hierarchy-menu">
        <ul>
          <Menu className="customer-lvl" href="#" title="올잇메디">
            <li className="group-lvl sub-nav open">
              <a className="top-agency" href="#">
                <span>지자체</span>
              </a>
              <ul id="venue-scope-options" className="low-agency">
                <Menu href="#" title="보호기관1" />
                <Menu href="#" title="보호기관2" />
                <Menu href="#" title="보호기관3" />
              </ul>
            </li>
            <li class="group-lvl sub-nav open">
              <a href="#" className="active top-agency">
                <span>관리 병원</span>
              </a>
              <ul className="low-agency">
                <Menu href="#" title="병원1" />
                <Menu href="#" title="병원2" />
                <Menu href="#" title="병원3" />
              </ul>
            </li>
            <li class="venue-lvl ">
              <a href="#" className="top-agency">
                <span>관리자</span>
              </a>
            </li>
          </Menu>
        </ul>
      </div>
    </div>
  );
}