import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { H as HTag, d as defineCustomElement$2 } from './telia-heading2.js';
import { d as defineCustomElement$1 } from './telia-vst2.js';

const AccordionNavigation = {
  Home: 'Home',
  End: 'End',
  ArrowUp: 'ArrowUp',
  ArrowDown: 'ArrowDown',
};
const AccordionNavigationArray = Object.keys(AccordionNavigation);

const teliaAccordionCss = ".telia-accordion__heading{margin:0;padding:calc(3.2rem * var(--voca-rem-multiplier)) 0}.telia-accordion__items{border-top:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-accordion--dark-bg .telia-accordion__heading{color:#ffffff}.telia-accordion--dark-bg .telia-accordion__items{border-top:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(255, 255, 255, 0.3)}";

const TeliaAccordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    /**
     * H-tag for the heading. Useful if the accordion group
     * (and its items) is placed in content where a specific
     * heading level makes more sense.
     */
    this.headingTag = HTag.H2;
    /** Accordion text is indented */
    this.indented = false;
    this.componentClass = 'telia-accordion';
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-accordion';
  }
  // eslint-disable-next-line @stencil/prefer-vdom-listener
  keydownHandler(ev) {
    const target = ev.target;
    if (target.nodeName.toLowerCase() !== 'telia-accordion-item') {
      return;
    }
    this.stopPreventRelevantEvents(ev);
    const items = this.fetchAccordionItems();
    const emitterIndex = items.findIndex(item => {
      return item === ev.target;
    });
    let nextIndex = this.getNextIndex(ev.key, emitterIndex, items.length);
    items[nextIndex].focusButton();
  }
  componentWillLoad() {
    if (this.indented) {
      // apply indentation on all slotted elements and dynamically inserted nodes
      this.host.childNodes.forEach(node => {
        node['indented'] = true;
      });
      this.mutationObserver = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
          mutation.addedNodes.forEach(node => {
            node['indented'] = true;
          });
        });
      });
      this.mutationObserver.observe(this.host, { childList: true });
    }
  }
  disconnectedCallback() {
    var _a;
    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
  }
  fetchAccordionItems() {
    const items = [];
    this.host
      .querySelectorAll('telia-accordion-item')
      .forEach(item => items.push(item));
    return items;
  }
  getNextIndex(key, currentIndex, length) {
    let nextIndex = currentIndex;
    switch (key) {
      case AccordionNavigation.ArrowDown:
        nextIndex = currentIndex + 1;
        if (nextIndex === length) {
          nextIndex = 0;
        }
        break;
      case AccordionNavigation.ArrowUp:
        nextIndex = currentIndex - 1;
        if (nextIndex < 0) {
          nextIndex = length - 1;
        }
        break;
      case AccordionNavigation.Home:
        nextIndex = 0;
        break;
      case AccordionNavigation.End:
        nextIndex = length - 1;
        break;
    }
    return nextIndex;
  }
  stopPreventRelevantEvents(ev) {
    if (AccordionNavigationArray.indexOf(ev.key) > -1) {
      ev.stopPropagation();
      ev.preventDefault();
    }
  }
  render() {
    const mainClass = {
      [this.componentClass]: true,
      [this.componentClass.concat('--dark-bg')]: this.darkBackground,
    };
    const headingClass = {
      [this.componentClass.concat('__heading')]: true,
    };
    const itemsClass = {
      [this.componentClass.concat('__items')]: true,
    };
    return (h("section", { class: mainClass }, h("telia-vst", { dataTrackingId: this.dataTrackingId }), this.heading ? (h("div", { class: headingClass }, h("telia-heading", { tag: this.headingTag, variant: "title-300" }, this.heading))) : (''), h("div", { class: itemsClass }, h("slot", null))));
  }
  get host() { return this; }
  static get style() { return teliaAccordionCss; }
}, [1, "telia-accordion", {
    "heading": [1],
    "headingTag": [1, "heading-tag"],
    "darkBackground": [4, "dark-background"],
    "indented": [4],
    "dataTestid": [1, "data-testid"]
  }, [[0, "keydown", "keydownHandler"]]]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-accordion", "telia-heading", "telia-vst"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-accordion":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaAccordion);
      }
      break;
    case "telia-heading":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "telia-vst":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { TeliaAccordion as T, defineCustomElement as d };
