import { buildRoute } from '@dvn/core/util/route';
import { h } from '@stencil/core';
function shouldHighlight(activeKey, option, subOptions = []) {
  for (let i = 0; i < option.path.length; i += 1) {
    if (option.path[i] === activeKey) {
      return true;
    }
  }
  for (let i = 0; i < subOptions.length; i += 1) {
    const subOption = subOptions[i];
    for (let j = 0; j < subOption.path.length; j += 1) {
      if (subOption.path[j] === activeKey) {
        return true;
      }
    }
  }
  return false;
}
function generateMenuHierarchy(menuConfig) {
  let sections = {};
  menuConfig.items.forEach(menuItem => {
    const { icon, section, parent, title } = menuItem.ui;
    const sectionKey = section || '';
    const sectionData = sections[sectionKey] || { title: sectionKey, options: [] };
    const menuKey = parent || title;
    let menuData = sectionData.options.find(o => {
      return o.title === menuKey;
    });
    const newMenu = !menuData;
    if (!menuData) {
      menuData = { title: menuKey, subOptions: [], path: [menuItem.viewId] || [], icon };
    }
    if (parent) {
      menuData = Object.assign(Object.assign({}, menuData), { subOptions: [
          ...menuData.subOptions,
          {
            title: title,
            path: [menuItem.viewId],
          },
        ] });
    }
    sections = Object.assign(Object.assign({}, sections), { [sectionKey]: Object.assign(Object.assign({}, sectionData), { options: newMenu ? [
          ...sectionData.options,
          menuData,
        ] : [...sectionData.options.map(o => o.title === menuKey ? menuData : o)] }) });
  });
  return sections;
}
export function renderMenu(isMinimised, viewId, membership, navigationConfig) {
  const sections = generateMenuHierarchy(navigationConfig);
  return (h("dvn-menu", { leaned: true }, Object.keys(sections).map(sectionKey => (h("dvn-menu-section", { "section-title": isMinimised ? undefined : sections[sectionKey].title, orientation: "vertical" }, sections[sectionKey].options.map(option => {
    const hasSubOptions = option.subOptions.length;
    const shouldHighlightMenu = shouldHighlight(viewId, option, option.subOptions);
    if (hasSubOptions) {
      if (isMinimised) {
        return (h("dvn-tooltip", { content: option.title, placement: "right" },
          h("dvn-dropdown", { placement: "rightTop", trigger: "click", leaned: true, offset: "var(--spacing-unit)" },
            h("dvn-menu-item", { highlighted: shouldHighlightMenu, highlightTint: "background-card" },
              h("dvn-info-summary", { leaned: true },
                h("dvn-icon", { slot: "media", iconName: option.icon, "is-square": true })),
              h("div", { slot: "sub-menu" })),
            h("div", { slot: "content" }, option.subOptions.map(so => (h("dvn-app-route-link", { key: so.path[0], url: buildRoute(membership.config.space._id, membership.config._id, membership._id, so.path[0]) },
              h("dvn-menu-item", { highlighted: shouldHighlight(viewId, so) }, so.title))))))));
      }
      return (h("dvn-app-route-link", { key: option.path[0], url: shouldHighlightMenu
          ? undefined
          : buildRoute(membership.config.space._id, membership.config._id, membership._id, option.path[0]) },
        h("dvn-menu-item", { highlighted: shouldHighlightMenu, "push-sub-options": !!option.icon, highlightTint: "background-card" },
          option.icon
            ? h("dvn-info-summary", { title: option.title, leaned: true },
              h("dvn-icon", { slot: "media", iconName: option.icon, "is-square": true }))
            : option.title,
          h("div", { slot: "sub-menu" }, option.subOptions.map(so => (h("dvn-app-route-link", { key: so.path[0], url: buildRoute(membership.config.space._id, membership.config._id, membership._id, so.path[0]) },
            h("dvn-menu-sub-item", { highlighted: shouldHighlight(viewId, so) }, so.title))))))));
    }
    return (h("dvn-app-route-link", { key: option.path[0], url: buildRoute(membership.config.space._id, membership.config._id, membership._id, option.path[0]) }, isMinimised
      ? h("dvn-tooltip", { content: option.title, placement: "right" },
        h("dvn-menu-item", { highlighted: shouldHighlight(viewId, option), highlightTint: "background-card" }, option.icon
          ? h("dvn-info-summary", { leaned: true },
            h("dvn-icon", { slot: "media", iconName: option.icon, "is-square": true }))
          : option.title))
      : h("dvn-menu-item", { highlighted: shouldHighlight(viewId, option), highlightTint: "background-card" }, option.icon
        ? h("dvn-info-summary", { title: option.title, leaned: true },
          h("dvn-icon", { slot: "media", iconName: option.icon, "is-square": true }))
        : option.title)));
  }))))));
}
