import { _ as _applyDecoratedDescriptor, a as _initializerDefineProperty, b as _defineProperty } from '../_rollupPluginBabelHelpers-9wjJaosZ.js';
import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { fn } from '@ember/helper';
import { on } from '@ember/modifier';
import didInsert from '@ember/render-modifiers/modifiers/did-insert';
import { scheduleOnce } from '@ember/runloop';
import findBy from 'ember-composable-helpers/helpers/find-by';
import { eq } from 'ember-truth-helpers';
import randomId from '../-private/random-id.js';
import EuiTab from './eui-tab.js';
import EuiTabs from './eui-tabs.js';

var _class, _descriptor, _descriptor2;
let EuiTabbedContentComponent = setComponentTemplate(precompileTemplate(`
    {{#let (randomId) as |rootId|}}
      <div class={{@className}} ...attributes>
        <EuiTabs
          @expand={{@expand}}
          @display={{@display}}
          @size={{@size}}
          {{on "focus" this.initializeFocus}}
          {{didInsert this.setTabsRef}}
        >
          {{#each @tabs as |tab|}}
            <EuiTab
              @id={{tab.id}}
              aria-controls={{rootId}}
              @isSelected={{eq tab.id this.selectedTab.id}}
              @disabled={{tab.disabled}}
              {{on "click" (fn this.onTabClick tab)}}
            >
              {{tab.name}}
            </EuiTab>
          {{/each}}
        </EuiTabs>
        {{#let (findBy "id" this.selectedTab.id @tabs) as |currentTab|}}
          <div role="tabpanel" id={{rootId}} aria-labelledby={{currentTab.id}}>
            {{#if (has-block "selectedTabContent")}}
              {{yield currentTab to="selectedTabContent"}}
            {{else}}
              {{currentTab.content}}
            {{/if}}
          </div>
        {{/let}}
      </div>
    {{/let}}
  `, {
  strictMode: true,
  scope: () => ({
    randomId,
    EuiTabs,
    on,
    didInsert,
    EuiTab,
    eq,
    fn,
    findBy
  })
}), (_class = class EuiTabbedContentComponent extends Component {
  get autoFocus() {
    return this.args.autoFocus || 'initial';
  }
  constructor(owner, args) {
    super(owner, args);
    _initializerDefineProperty(this, "selectedTabId", _descriptor, this);
    _initializerDefineProperty(this, "inFocus", _descriptor2, this);
    _defineProperty(this, "tabsRef", void 0);
    _defineProperty(this, "setTabsRef", element => {
      this.tabsRef = element;
      // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)
      //@ts-expect-error
      this.tabsRef.addEventListener('focusout', this.removeFocus);
    });
    _defineProperty(this, "removeFocus", blurEvent => {
      // only set inFocus to false if the wrapping div doesn't contain the now-focusing element
      const currentTarget = blurEvent.currentTarget;
      const relatedTarget = blurEvent.relatedTarget;
      if (currentTarget.contains(relatedTarget) === false) {
        this.inFocus = true;
      }
    });
    _defineProperty(this, "onTabClick", selectedTab => {
      const {
        onTabClick,
        selectedTab: externalSelectedTab
      } = this.args;
      if (onTabClick) {
        onTabClick(selectedTab);
      }

      // Only track selection state if it's not controlled externally.
      if (!externalSelectedTab) {
        this.selectedTabId = selectedTab.id;
        const focusTab = () => {
          this.focusTab();
        };
        scheduleOnce('afterRender', this, focusTab);
      }
    });
    _defineProperty(this, "focusTab", () => {
      if (this.tabsRef) {
        const targetTab = this.tabsRef.querySelector(`#${this.selectedTabId}`);
        targetTab.focus();
      }
    });
    _defineProperty(this, "initializeFocus", () => {
      if (!this.inFocus && this.autoFocus === 'selected') {
        // Must wait for setState to finish before calling `.focus()`
        // as the focus call triggers a blur on the first tab
        this.inFocus = true;
        const focusTab = () => {
          this.focusTab();
        };
        scheduleOnce('afterRender', this, focusTab);
      }
    });
    const {
      initialSelectedTab,
      selectedTab: _selectedTab,
      tabs
    } = this.args;

    // Only track selection state if it's not controlled externally.
    if (!_selectedTab) {
      this.selectedTabId = initialSelectedTab && initialSelectedTab.id || tabs[0]?.id;
    }
  }
  get selectedTab() {
    const {
      selectedTab: externalSelectedTab,
      tabs
    } = this.args;
    return externalSelectedTab || tabs.find(tab => tab.id === this.selectedTabId);
  }
  willDestroy() {
    super.willDestroy();
    if (this.tabsRef) {
      //@ts-expect-error
      this.tabsRef.removeEventListener('focusout', this.removeFocus);
    }
    this.tabsRef = undefined;
  }
}, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "selectedTabId", [tracked], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
}), _descriptor2 = _applyDecoratedDescriptor(_class.prototype, "inFocus", [tracked], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function () {
    return false;
  }
})), _class));

export { EuiTabbedContentComponent as default };
//# sourceMappingURL=eui-tabbed-content.js.map
