import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import Component from '@glimmer/component';
import { fn } from '@ember/helper';
import { on } from '@ember/modifier';
import optional from 'ember-composable-helpers/helpers/optional';
import { element } from 'ember-element-helper';
import { or, not, and, eq } from 'ember-truth-helpers';
import randomId from '../-private/random-id.js';
import EuiButtonEmpty from './eui-button-empty.js';
import EuiHideForComponent from './eui-hide-for.js';
import EuiShowForComponent from './eui-show-for.js';
import EuiSideNavItem from './eui-side-nav-item.js';
import EuiTitle from './eui-title.js';
import argOrDefault from '../helpers/arg-or-default.js';
import classNames from '../helpers/class-names.js';
import isItemOpen from '../helpers/is-item-open.js';
import screenReaderOnly from '../modifiers/screen-reader-only.js';

class EuiSideNavComponent extends Component {
  get mobileBreakpoints() {
    return this.args.mobileBreakpoints || ['xs', 's'];
  }
  get contentClasses() {
    let mobileBreakpoints = Array.isArray(this.mobileBreakpoints) ? this.mobileBreakpoints : [this.mobileBreakpoints];
    return `euiSideNav__content ${mobileBreakpoints.map?.(breakpointName => {
      return `euiSideNav__contentMobile-${breakpointName}`;
    }).join(' ')}`;
  }
  get hasMobileVersion() {
    return this.mobileBreakpoints?.length > 0;
  }
}
setComponentTemplate(precompileTemplate(`
    {{#let
      (classNames "euiSideNav" (if @isOpenMobile "euiSideNav-isOpenMobile"))
      (element (argOrDefault @headingProps.element "h2"))
      (argOrDefault @headingProps.id (randomId))
      (randomId)
      (or (has-block "heading") (not (not @heading)))
      as |classes HeadingElement headingId sideNavContentId hasHeader|
    }}
      {{#if this.hasMobileVersion}}
        <EuiShowFor @sizes={{this.mobileBreakpoints}}>
          <nav aria-labelledby={{headingId}} class={{classes}} ...attributes>
            <HeadingElement id={{headingId}} class={{@headingProps.className}}>
              <EuiButtonEmpty
                type="button"
                class="euiSideNav__mobileToggle"
                @contentClasses="euiSideNav__mobileToggleContent"
                @textClasses="euiSideNav__mobileToggleText"
                {{on
                  "click"
                  (fn (optional @toggleOpenOnMobile) (not @isOpenMobile))
                }}
                @iconType="apps"
                @iconSide="right"
                aria-controls={{sideNavContentId}}
                aria-expanded={{@isOpenMobile}}
              >
                {{#if @mobileTitle}}
                  {{@mobileTitle}}
                {{else if (has-block "heading")}}
                  {{yield to="heading"}}
                {{else}}
                  {{@heading}}
                {{/if}}
              </EuiButtonEmpty>
            </HeadingElement>
            <div id={{sideNavContentId}} class={{this.contentClasses}}>
              {{#each @items as |item|}}
                {{#let
                  (and
                    (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 item.isSelected)
                    }}
                    @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={{0}}
                    @renderItem={{item.renderItem}}
                    @disabled={{item.disabled}}
                    @truncate={{item.truncate}}
                    @emphasize={{item.emphasize}}
                    @buttonClassName={{item.buttonClassName}}
                    @childrenOnly={{childrenOnly}}
                  >
                    {{item.name}}
                  </EuiSideNavItem>
                {{/let}}
              {{/each}}
            </div>
          </nav>
        </EuiShowFor>
      {{/if}}

      <EuiHideFor @sizes={{this.mobileBreakpoints}}>
        <nav
          aria-labelledby={{if hasHeader headingId}}
          class={{classes}}
          ...attributes
        >
          {{#if hasHeader}}
            {{#let
              (argOrDefault @headingProps.screenReaderOnly false)
              as |shouldScreenReader|
            }}
              {{#if (has-block "heading")}}
                {{#if shouldScreenReader}}
                  <HeadingElement {{screenReaderOnly}}>
                    {{yield to="heading"}}
                  </HeadingElement>
                {{else}}
                  <EuiTitle
                    class={{classNames
                      "euiSideNav__heading"
                      @headingProps.className
                    }}
                    @size="xs"
                  >
                    <HeadingElement>
                      {{yield to="heading"}}
                    </HeadingElement>
                  </EuiTitle>
                {{/if}}
              {{else}}
                {{#if screenReaderOnly}}
                  <HeadingElement {{screenReaderOnly}}>
                    {{@heading}}
                  </HeadingElement>
                {{else}}
                  <EuiTitle
                    class={{classNames
                      "euiSideNav__heading"
                      @headingProps.className
                    }}
                    @size="xs"
                  >
                    {{@heading}}
                  </EuiTitle>
                {{/if}}
              {{/if}}
            {{/let}}
          {{/if}}
          <div id={{sideNavContentId}} class={{this.contentClasses}}>
            {{#each @items as |item|}}
              {{#let
                (and (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 item.isSelected)
                  }}
                  @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={{0}}
                  @renderItem={{item.renderItem}}
                  @disabled={{item.disabled}}
                  @truncate={{item.truncate}}
                  @emphasize={{item.emphasize}}
                  @buttonClassName={{item.buttonClassName}}
                  @childrenOnly={{childrenOnly}}
                >
                  {{item.name}}
                </EuiSideNavItem>
              {{/let}}
            {{/each}}
          </div>
        </nav>
      </EuiHideFor>
    {{/let}}
  `, {
  strictMode: true,
  scope: () => ({
    classNames,
    element,
    argOrDefault,
    randomId,
    or,
    not,
    EuiShowFor: EuiShowForComponent,
    EuiButtonEmpty,
    on,
    fn,
    optional,
    and,
    EuiSideNavItem,
    isItemOpen,
    eq,
    EuiHideFor: EuiHideForComponent,
    screenReaderOnly,
    EuiTitle
  })
}), EuiSideNavComponent);

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