import { Component, Prop, h } from '@stencil/core';
export class TeliaFooterNavigation {
  constructor() {
    /**
     * An array of lists of links or a stringified
     * representation of the same.
     */
    this.links = [];
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-footer-navigation';
    this.maxRenderedItems = 6;
    this.componentClass = 'telia-footer-navigation';
  }
  getLinks() {
    let data = [];
    if (typeof this.links === 'object') {
      data = this.links;
    }
    else {
      data = JSON.parse(this.links);
    }
    // Print a console warning if number of provided items exceeds our current allowed limit
    if (data.length > this.maxRenderedItems) {
      console.warn(`[VDS:telia-footer-navigation] The amount of "links" provided exceeds out current limit of ${this.maxRenderedItems} items, items above the limit are discarded.`);
    }
    return data.slice(0, this.maxRenderedItems);
  }
  renderLinkList(list) {
    return (h("telia-list", null, list.map(link => (h("li", { class: `${this.componentClass}__list-item` },
      h("telia-style-link", { variant: "navigation", "dark-background": true, "disable-visited": true },
        h("a", { href: link.href }, link.name)))))));
  }
  getListColumnWidth(links = []) {
    if (links.length > 4)
      return 2;
    return 3;
  }
  render() {
    const links = this.getLinks();
    const listColumnWidth = this.getListColumnWidth(links);
    return (h("div", { class: this.componentClass, "data-testid": this.dataTestid },
      h("section", { class: `${this.componentClass}__list-container` },
        h("telia-row", null, 
        // Limiting rendering to only the first 6 columns
        links.map(list => (h("telia-col", { width: listColumnWidth },
          h("h2", { class: `${this.componentClass}__list-header` }, list.header),
          this.renderLinkList(list.links)))))),
      h("section", { class: `${this.componentClass}__accordion-container` },
        h("telia-accordion", { "dark-background": true }, links.map(list => (h("telia-accordion-item", { "heading-tag": "h2", heading: list.header, "dark-background": true }, this.renderLinkList(list.links)))))),
      h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
  static get is() { return "telia-footer-navigation"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["telia-footer-navigation.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-footer-navigation.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
    },
    "links": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Array<LinkList> | string",
        "resolved": "LinkList[] | string",
        "references": {
          "Array": {
            "location": "global"
          },
          "LinkList": {
            "location": "import",
            "path": "../../types/LinkList"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "An array of lists of links or a stringified\nrepresentation of the same."
      },
      "attribute": "links",
      "reflect": false,
      "defaultValue": "[]"
    }
  }; }
}
