import { Component, Prop, h, Listen, Element } from '@stencil/core';
import { HTag } from '../../types/HTag';
import { AccordionNavigation, AccordionNavigationArray, } from '../../types/AccordionNavigation';
export class TeliaAccordion {
  constructor() {
    /**
     * 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))));
  }
  static get is() { return "telia-accordion"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["telia-accordion.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-accordion.css"]
  }; }
  static get properties() { return {
    "heading": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Heading for the accordion group."
      },
      "attribute": "heading",
      "reflect": false
    },
    "headingTag": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "HTagType",
        "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
        "references": {
          "HTagType": {
            "location": "import",
            "path": "../../types/HTag"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "H-tag for the heading. Useful if the accordion group\n(and its items) is placed in content where a specific\nheading level makes more sense."
      },
      "attribute": "heading-tag",
      "reflect": false,
      "defaultValue": "HTag.H2"
    },
    "darkBackground": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "When used on a dark background, set this\nproperty to true. This will change color of text,\nborders and hover to something suitable. Note: content in\nslot will not change color; this needs to be handled\noutside of this component."
      },
      "attribute": "dark-background",
      "reflect": false
    },
    "indented": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Accordion text is indented"
      },
      "attribute": "indented",
      "reflect": false,
      "defaultValue": "false"
    },
    "dataTestid": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Test id set for web component host"
      },
      "attribute": "data-testid",
      "reflect": false
    }
  }; }
  static get elementRef() { return "host"; }
  static get listeners() { return [{
      "name": "keydown",
      "method": "keydownHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
