import { html } from "lit";
import { PrimariaNavTreeMenu } from "./primaria-nav-tree-menu";
import { classMap } from "lit/directives/class-map.js";

export const template = (props: PrimariaNavTreeMenu) => html`
  <div class="wrapper">
    <primaria-nav-item
      .config=${props.primariaNavItemConfig}
      class="${classMap({ "menu-active": props.showActionMenu })}"
    ></primaria-nav-item>
    <dss-action-menu
      @onCloseActionMenu=${props.handleCloseMenu}
      ?hidden=${!props.showActionMenu}
    >
      ${props.config.actionMenuItems?.map((item) =>
        item.hasNestedMenu
          ? html`
            <dss-action-menu-item
              righticon=${item.icon}
              .label=${item.label}
              hasnestedmenu
            >
              <dss-action-menu>
                ${item.nestedMenuItems?.map(
                  (nestedItem) => html`
                    <dss-action-menu-item
                      righticon=${nestedItem.icon}
                      .label=${nestedItem.label}
                      @click=${nestedItem.callbackFn}
                    ></dss-action-menu-item>
                  `,
                )}
              </dss-action-menu>
            </dss-action-menu-item>
          `
          : html`
            <dss-action-menu-item
              righticon=${item.icon}
              .label=${item.label}
              @click=${item.callbackFn}
            ></dss-action-menu-item>
          `,
      )}
    </dss-action-menu>
  </div>
`;