import { Component, h, Prop, Event, Element, } from '@stencil/core';
import { TabNavigationTypes, TabNavigationTypesArray, } from '../../types/TabNavigation';
export class TeliaTabHeader {
  constructor() {
    /** Test id set for web component host */
    this.dataTestid = null;
    /** The active prop is set from the telia-tab event listener*/
    this.active = false;
    /** Custom event on focus, only used internally*/
    /** index of tab-header*/
    this.dataIndex = null;
    /** will toggle --has-keypress class based on interaction with component */
    this.isKeyPress = true;
    /** Style of header */
    this.variant = 'default';
  }
  componentDidUpdate() {
    if (this.active && this.isKeyPress) {
      this.element.querySelector('button').focus();
    }
  }
  /** Handle click event
   * @param e - event
   * @private
   */
  onClickHandler(e) {
    e.preventDefault();
    e.stopPropagation();
    this.tabChange.emit('click,' + this.dataIndex.toString());
    this.vocaInternalTabNavigation.emit({
      originalEvent: e,
      value: { location: this.dataIndex },
    });
  }
  /** Handle keyboard navigation
   * @param e - event
   * @private
   */
  onKeyDownHandler(e) {
    const key = e.key;
    if (key === TabNavigationTypes.ArrowRight ||
      key === TabNavigationTypes.ArrowLeft) {
      e.preventDefault();
      e.stopPropagation();
      const index = e.key === TabNavigationTypes.ArrowRight
        ? this.dataIndex + 1
        : this.dataIndex - 1;
      this.tabChange.emit(key + ',' + index.toString());
    }
    else if (key === TabNavigationTypes.Home ||
      key === TabNavigationTypes.End) {
      e.preventDefault();
      e.stopPropagation();
      this.tabChange.emit(key + ',');
    }
    this.handleKeyNavigation(e);
  }
  handleKeyNavigation(e) {
    const key = e.key;
    if (TabNavigationTypesArray.indexOf(key) > -1) {
      e.preventDefault();
      e.stopPropagation();
      const typedKey = TabNavigationTypes[key];
      this.vocaInternalTabNavigation.emit({
        originalEvent: e,
        value: { key: typedKey },
      });
    }
  }
  render() {
    const classes = {
      'telia-tab-header': true,
      'telia-tab-header--selected': this.active,
      [`telia-tab-header--${this.variant}`]: !!this.variant,
    };
    return (h("button", { class: classes, role: "tab", id: this.tabId + '-header', "aria-selected": this.active, "aria-controls": this.tabId + '-content', onClick: e => this.onClickHandler(e), onKeyDown: e => this.onKeyDownHandler(e), "data-testid": this.dataTestid, tabIndex: this.active ? null : -1, "data-index": this.dataIndex },
      h("span", { class: "telia-tab-header__content" },
        this.icon && (h("telia-icon", { class: "telia-tab-header__icon", name: this.icon, svg: this.svg, size: "md" })),
        h("span", null,
          h("span", { class: "telia-tab-header__visible-title" },
            h("slot", null)),
          h("span", { class: "telia-tab-header__hidden-title", "aria-hidden": true }, this.name)))));
  }
  static get is() { return "telia-tab-header"; }
  static get originalStyleUrls() { return {
    "$": ["telia-tab-header.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-tab-header.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,
      "defaultValue": "null"
    },
    "tabId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Use this prop to set `id` attribute of the component."
      },
      "attribute": "tab-id",
      "reflect": false
    },
    "active": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The active prop is set from the telia-tab event listener"
      },
      "attribute": "active",
      "reflect": true,
      "defaultValue": "false"
    },
    "icon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "IconName",
        "resolved": "\"check-bold\" | \"minus-bold\" | \"4g\" | \"5g\" | \"accessories\" | \"activity-level\" | \"add\" | \"address-book\" | \"ai-robot\" | \"airplay\" | \"alarm-off\" | \"alarm\" | \"alert-filled\" | \"alert\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-subdirectory\" | \"arrow-up\" | \"attachment\" | \"b2b-customer\" | \"bag\" | \"bar-chart\" | \"basketball\" | \"battery\" | \"blood-pressure\" | \"bluetooth\" | \"bookmark\" | \"broadband\" | \"broken-phone\" | \"bulb\" | \"business-continuity\" | \"business-intelligence\" | \"calendar\" | \"camera\" | \"card-view\" | \"care\" | \"cart\" | \"cast\" | \"chat-robot\" | \"chat\" | \"check-circle-filled\" | \"check-circle\" | \"checkmark\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"child-1\" | \"child-2\" | \"close-circle\" | \"close\" | \"cloud-connect\" | \"cloud\" | \"coffee\" | \"compass\" | \"connected-building\" | \"connected\" | \"construction\" | \"conversation\" | \"copy\" | \"core-router\" | \"credit-card\" | \"customer-dialogue\" | \"daas-device\" | \"data-transfer\" | \"delete-filled\" | \"delete\" | \"delivery\" | \"desktop\" | \"devices\" | \"dislike\" | \"doc\" | \"document-doc\" | \"document-edit\" | \"document-pdf\" | \"document-ppt\" | \"download\" | \"drone\" | \"dsl-hub\" | \"edit\" | \"education\" | \"efficiency\" | \"email\" | \"end-user\" | \"entertainment\" | \"environment\" | \"error-filled\" | \"error\" | \"esim-simcard\" | \"esim\" | \"euro\" | \"excel\" | \"external\" | \"face-id\" | \"facebook\" | \"facemask\" | \"fiber\" | \"film\" | \"filter\" | \"fingerprint\" | \"flag\" | \"focus\" | \"folder-copy\" | \"folder-new\" | \"folder\" | \"food\" | \"fraud\" | \"games\" | \"getting-started\" | \"gif\" | \"graph\" | \"grid-view\" | \"handshake\" | \"headphones\" | \"heart-filled\" | \"heart\" | \"help\" | \"home-care\" | \"home-installation\" | \"home\" | \"hospital\" | \"image\" | \"industrial-iot\" | \"industry\" | \"infinite\" | \"info-filled\" | \"info\" | \"instagram\" | \"internet\" | \"invoice\" | \"job-search\" | \"key\" | \"kontantkort\" | \"laptop\" | \"late-payment\" | \"layers\" | \"letter\" | \"like\" | \"link\" | \"linkedin\" | \"list-view\" | \"lock-closed\" | \"lock-open\" | \"login\" | \"logout\" | \"map\" | \"measuring-health\" | \"media-content\" | \"megaphone\" | \"menu\" | \"microphone\" | \"minus\" | \"mms\" | \"mobile-broadband\" | \"moisture\" | \"money-back\" | \"money-euro\" | \"money-krone\" | \"more-horizontal\" | \"more-vertical\" | \"music\" | \"mute\" | \"network\" | \"new-contact\" | \"new-group\" | \"news\" | \"offering\" | \"offshore\" | \"optimization\" | \"org-chart\" | \"parental-guide\" | \"password-invisible\" | \"password-visible\" | \"pay-monthly\" | \"pay-once\" | \"payment-success\" | \"pebble\" | \"people-hub\" | \"people\" | \"pet-dog\" | \"phone-recycling\" | \"phone-ringing\" | \"phone\" | \"pie-chart\" | \"pin\" | \"plane\" | \"play\" | \"player-settings\" | \"plus-minus\" | \"plus\" | \"police\" | \"portal\" | \"power-grid\" | \"premises-datacenter\" | \"premises-large\" | \"premises-medium\" | \"premises-small\" | \"premises\" | \"present\" | \"press-button\" | \"price\" | \"print\" | \"pulse\" | \"question-filled\" | \"question\" | \"rack\" | \"radio\" | \"record\" | \"recycle\" | \"refill-card\" | \"register\" | \"remote-control\" | \"repair\" | \"report\" | \"reservation\" | \"reverse\" | \"roaming\" | \"route\" | \"router\" | \"ruler\" | \"satellite\" | \"save\" | \"savings\" | \"search\" | \"secure-device\" | \"secured-1\" | \"secured-2\" | \"security-camera\" | \"send\" | \"sense-car\" | \"server\" | \"service-device\" | \"service-supervision\" | \"services\" | \"settings\" | \"share\" | \"shopping\" | \"shuffle\" | \"signature\" | \"simcard\" | \"skip-back-10sec\" | \"skip-back-30sec\" | \"skip-forward-10sec\" | \"skip-forward-30sec\" | \"slow-wifi\" | \"smart-wifi\" | \"smartphone\" | \"smartwatch\" | \"smiley-happy\" | \"smiley-sad\" | \"sms\" | \"snapchat\" | \"snowflake\" | \"sorter\" | \"speedometer\" | \"spell-check\" | \"split\" | \"spyware\" | \"star-filled\" | \"star\" | \"stop\" | \"store\" | \"stream\" | \"suitcase\" | \"summary\" | \"support\" | \"sustainability\" | \"switch\" | \"sync\" | \"table-view\" | \"tablet\" | \"tag\" | \"temperature\" | \"thinking\" | \"time\" | \"trade-phone\" | \"trailer\" | \"train\" | \"transfer\" | \"tv-next\" | \"tv-pause\" | \"tv-play\" | \"tv-previous\" | \"tv-stop\" | \"tv\" | \"twitter\" | \"undo\" | \"upload\" | \"usb\" | \"user-admin\" | \"vcard\" | \"video-conference\" | \"video\" | \"voice-switch\" | \"voicemail\" | \"volume\" | \"wallet\" | \"wallplug\" | \"warning\" | \"wavelength\" | \"weather\" | \"wireless-off\" | \"wireless\" | \"world-alert\" | \"world-off\" | \"world-question\" | \"world\" | \"youtube\" | \"zoom-out\" | \"zoom\"",
        "references": {
          "IconName": {
            "location": "import",
            "path": "@teliads/icons/dist/main/Icons"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Icon prop is inherited from tab-content"
      },
      "attribute": "icon",
      "reflect": false
    },
    "svg": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Svg string used for tree-shakable icon rendering"
      },
      "attribute": "svg",
      "reflect": false
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Name sets the content title of tab header, inherited from tab-content"
      },
      "attribute": "name",
      "reflect": false
    },
    "dataIndex": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "index of tab-header"
      },
      "attribute": "data-index",
      "reflect": false,
      "defaultValue": "null"
    },
    "isKeyPress": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "will toggle --has-keypress class based on interaction with component"
      },
      "attribute": "is-key-press",
      "reflect": false,
      "defaultValue": "true"
    },
    "variant": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "TabVariant",
        "resolved": "\"contained\" | \"contained-on-negative\" | \"default\" | \"inline\" | \"light\" | \"light-wide\" | \"wide\"",
        "references": {
          "TabVariant": {
            "location": "import",
            "path": "../../types/TabVariants"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Style of header"
      },
      "attribute": "variant",
      "reflect": false,
      "defaultValue": "'default'"
    }
  }; }
  static get events() { return [{
      "method": "tabChange",
      "name": "tabChange",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Deprecated use vocaTabChange instead - Custom event on click"
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }, {
      "method": "vocaInternalTabNavigation",
      "name": "vocaInternalTabNavigation",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Only for internal use. Emitted when header senses navigation and\nallows main component telia-tab to respond and set active tab."
      },
      "complexType": {
        "original": "TabNavigationDetail",
        "resolved": "{ originalEvent: Event; value: { key?: TabNavigationType; location?: number; }; }",
        "references": {
          "TabNavigationDetail": {
            "location": "import",
            "path": "./TabNavigationDetail"
          }
        }
      }
    }]; }
  static get elementRef() { return "element"; }
}
