import { h, Host } from '@stencil/core';
import { ElementIDUtils, JSUtils } from '@sankhyalabs/core';
export class EzViewStack {
  constructor() {
    /**
     * Indetificador único do componente
     */
    this._dataKey = '';
  }
  /**
  * Exibe a visão de acordo com o índice.
  */
  async show(index) {
    if (index !== this._focusedIndex && 0 <= index && index < this._totalStackItems) {
      this.policyHideRemove();
      this.policyShowAppend(index);
      this._focusedIndex = index;
    }
  }
  /**
  * Obtem o índice selecionado.
  */
  async getSelectedIndex() {
    return this._focusedIndex;
  }
  policyHideRemove() {
    let element = this._hostElem.querySelector(`#${this._dataKey}_el_${this._focusedIndex}`);
    this.checkElementVisibility(element);
  }
  policyShowAppend(index) {
    let selectedElement = this._hostElem.querySelector(`#${this._dataKey}_el_${index}`);
    if (selectedElement) {
      selectedElement.setAttribute("style", "visibility: visible");
    }
    else {
      this._hostElem.append(this._elemList[index]);
    }
    ;
  }
  checkElementVisibility(element) {
    if (element.getAttribute("hidePolicy") === "hide" || !element.getAttribute("hidePolicy")) {
      element.setAttribute("style", "display: none");
    }
    else if (element.getAttribute("hidePolicy") === "remove") {
      element.remove();
    }
  }
  componentWillRender() {
    this._dataKey = 'id_'.concat(JSUtils.generateUUID());
    if (!this._elemList) {
      this._elemList = [];
      this._focusedIndex = 0;
      this._totalStackItems = 0;
      this._hostElem.classList.add("ez-view-stack__container");
      this._hostElem.querySelectorAll(":scope > stack-item").forEach((element, index) => {
        element.setAttribute("id", `${this._dataKey}_el_${index}`);
        if (index !== 0) {
          this.checkElementVisibility(element);
        }
        else {
          element.setAttribute("style", "visibility: visible");
        }
        this._totalStackItems++;
        this._elemList.push(element);
      });
    }
  }
  componentDidLoad() {
    ElementIDUtils.addIDInfo(this._hostElem);
  }
  disconectCallback() {
    this._hostElem = null;
    this._elemList = null;
  }
  render() {
    return (h(Host, null));
  }
  static get is() { return "ez-view-stack"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-view-stack.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-view-stack.css"]
    };
  }
  static get methods() {
    return {
      "show": {
        "complexType": {
          "signature": "(index: number) => Promise<void>",
          "parameters": [{
              "tags": [],
              "text": ""
            }],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Exibe a vis\u00E3o de acordo com o \u00EDndice.",
          "tags": []
        }
      },
      "getSelectedIndex": {
        "complexType": {
          "signature": "() => Promise<number>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<number>"
        },
        "docs": {
          "text": "Obtem o \u00EDndice selecionado.",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "_hostElem"; }
}
