import templateOnly from '@ember/component/template-only';
import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import { on } from '@ember/modifier';
import optional from 'ember-composable-helpers/helpers/optional';
import add from 'ember-math-helpers/helpers/add';
import { eq, and, gt, or, not } from 'ember-truth-helpers';
import EuiSideNavItemButton from './eui-side-nav-item/button.js';
import classNames from '../helpers/class-names.js';
import isItemOpen from '../helpers/is-item-open.js';

const EuiSideNavItem = setComponentTemplate(precompileTemplate(`
    <div
      class={{classNames
        "euiSideNavItem"
        (if (eq @depth 1) "euiSideNavItem--trunk")
        (if (eq @depth 0) "euiSideNavItem--root")
        (if (and (eq @depth 0) @icon) "euiSideNavItem--rootIcon")
        (if (gt @depth 1) "euiSideNavItem--branch")
        (if @items.length "euiSideNavItem--hasChildItems")
        (if @emphasize "euiSideNavItem--emphasized")
      }}
    >
      {{#let
        (classNames
          "euiSideNavItemButton"
          (if (or @onClick @href) "euiSideNavItemButton--isClickable")
          (if
            (and (gt @depth 0) @isOpen (not @isSelected))
            "euiSideNavItemButton-isOpen"
          )
          (if @isSelected "euiSideNavItemButton-isSelected")
          @buttonClassName
        )
        (and (gt @depth 0) @isParent (not @isOpen) (not @isSelected))
        as |className caret|
      }}
        {{#if (and @href (not @disabled))}}
          <a
            class={{className}}
            href={{@href}}
            target={{@target}}
            rel={{@rel}}
            {{on "click" (optional @onClick)}}
          >
            <Button
              @icon={{@icon}}
              @buttonIconClasses={{@buttonIconClasses}}
              @caret={{caret}}
            >
              {{yield}}
            </Button>
          </a>
        {{else if (or @onClick @disabled)}}
          <button
            type="button"
            class={{className}}
            disabled={{@disabled}}
            {{on "click" (optional @onClick)}}
          >
            <Button
              @icon={{@icon}}
              @truncate={{@truncate}}
              @buttonIconClasses={{@buttonIconClasses}}
              @caret={{caret}}
            >
              {{yield}}
            </Button>
          </button>
        {{else}}
          <div class={{className}}>
            <Button
              @icon={{@icon}}
              @truncate={{@truncate}}
              @buttonIconClasses={{@buttonIconClasses}}
              @caret={{caret}}
            >
              {{yield}}
            </Button>
          </div>
        {{/if}}
      {{/let}}
      {{#if (or (eq @depth 0) (and @items.length @isOpen))}}
        <div class="euiSideNavItem__items">
          {{#each @items as |item|}}
            {{#let
              (and
                (gt @depth 0)
                (not item.onClick)
                (not item.href)
                (not (not item.items))
              )
              as |childrenOnly|
            }}
              <EuiSideNavItem
                @selectedItem={{@selectedItem}}
                @isOpen={{isItemOpen item @selectedItem}}
                @isSelected={{and
                  (not childrenOnly)
                  (eq item.id @selectedItem)
                }}
                @isParent={{not (not item.items)}}
                @icon={{item.icon}}
                @onClick={{item.onClick}}
                @href={{item.href}}
                @className={{item.className}}
                @rel={{item.rel}}
                @target={{item.target}}
                @items={{item.items}}
                @depth={{add @depth 1}}
                @name={{item.name}}
                @renderItem={{item.renderItem}}
                @disabled={{item.disabled}}
                @truncate={{item.truncate}}
                @emphasize={{item.emphasize}}
                @buttonClassName={{item.buttonClassName}}
                @childrenOnly={{childrenOnly}}
              >
                {{item.name}}
              </EuiSideNavItem>
            {{/let}}
          {{/each}}
        </div>
      {{/if}}
    </div>
  `, {
  strictMode: true,
  scope: () => ({
    classNames,
    eq,
    and,
    gt,
    or,
    not,
    on,
    optional,
    Button: EuiSideNavItemButton,
    EuiSideNavItem,
    isItemOpen,
    add
  })
}), templateOnly("eui-side-nav-item", "EuiSideNavItem"));

export { EuiSideNavItem as default };
//# sourceMappingURL=eui-side-nav-item.js.map
