import { Component, Prop, h, State, Method } from '@stencil/core';
import uniqueId from '../../utils/uniqueId';
import { chevronUp } from '@teliads/icons';
export class TeliaAccordionItem {
  constructor() {
    this.isOpen = false;
    this.componentClass = 'telia-accordion-item';
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-accordion-item';
    this.uniqueId = uniqueId('accordion');
    this.toggleAccordion = () => {
      this.isOpen = !this.isOpen;
    };
    this.setButtonRef = (elm) => {
      this.buttonEl = elm;
    };
  }
  /**
   * Sets focus on the accordion button (it contains the header).
   */
  async focusButton() {
    this.buttonEl.focus();
  }
  render() {
    const mainClass = {
      [this.componentClass]: true,
      [this.componentClass.concat('--dark-bg')]: this.darkBackground,
    };
    const itemHeadingClass = {
      [this.componentClass.concat('__header')]: true,
      [this.componentClass.concat('__header--indented')]: this.indented,
      [this.componentClass.concat('__header--active')]: this.isOpen,
    };
    const itemContentClass = {
      [this.componentClass.concat('__content')]: true,
      [this.componentClass.concat('__content--indented')]: this.indented,
      [this.componentClass.concat('__content--visible')]: this.isOpen,
    };
    const itemIconClass = {
      [this.componentClass.concat('__header-icon')]: true,
      [this.componentClass.concat('__header-icon--rotate')]: this.isOpen,
    };
    return (h("div", { class: mainClass },
      h("telia-vst", { dataTrackingId: this.dataTrackingId }),
      h("button", { id: `telia-accordion-item-header-${this.uniqueId}`, class: itemHeadingClass, type: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": `telia-accordion-item-content-${this.uniqueId}`, onClick: this.toggleAccordion, ref: this.setButtonRef },
        h("span", { class: "telia-accordion-item__header-title" }, this.heading),
        h("telia-icon", { svg: chevronUp.svg, class: itemIconClass })),
      h("div", { id: `telia-accordion-item-content-${this.uniqueId}`, "data-test-id": "item-content", class: itemContentClass, role: "region", "aria-labelledby": `telia-accordion-item-header-${this.uniqueId}` },
        h("slot", null))));
  }
  static get is() { return "telia-accordion-item"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["telia-accordion-item.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-accordion-item.css"]
  }; }
  static get properties() { return {
    "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
    },
    "heading": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Heading for this accordion item."
      },
      "attribute": "heading",
      "reflect": false
    },
    "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
    }
  }; }
  static get states() { return {
    "isOpen": {}
  }; }
  static get methods() { return {
    "focusButton": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Sets focus on the accordion button (it contains the header).",
        "tags": []
      }
    }
  }; }
}
