import { Component, Prop, h, State, Event } from '@stencil/core';
import { SearchInputVariants, } from '../../types/SearchInputVariants';
import { ButtonVariant } from '../../types/ButtonVariant';
export class TeliaSearchInput {
  constructor() {
    /** Placeholder text */
    this.placeholder = 'Search...';
    /** Variant */
    this.variant = SearchInputVariants.DEFAULT;
    /** Accessibility: aria-label for the input */
    this.ariaLabel = null;
    /** Text for "Expressive" variant search button  */
    this.searchButtonText = 'Search';
    /** Accessibility: aria-label for the search button */
    this.searchButtonAriaLabel = 'Search button';
    /** Accessibility: aria-label for the reset input button */
    this.resetInputButtonAriaLabel = 'Reset input button';
    /** Set button disabled */
    this.disabled = false;
    /** Input value */
    this.inputValue = '';
    this.classname = 'telia-search-input';
    this.leadingIconVariants = [
      SearchInputVariants.SIMPLE,
      SearchInputVariants.ADVANCED,
    ];
    this.searchButtonVariants = [
      SearchInputVariants.DEFAULT,
      SearchInputVariants.ADVANCED,
    ];
    this.matchVariant = (variants) => {
      return variants.includes(this.variant);
    };
    this.handleInput = (event) => {
      this.inputValue = event.target.value;
    };
    this.handleResetInput = () => {
      var _a;
      this.inputValue = '';
      (_a = this.inputElement.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
    };
  }
  renderIcon(iconName, className, ariaHidden = false) {
    return (h("telia-icon", { name: iconName, size: "sm", class: className, "aria-hidden": ariaHidden }));
  }
  renderResetInputButton() {
    return (h("telia-button", { variant: "text", size: "sm", class: `${this.classname}__reset-input-button`, onClick: this.handleResetInput, allyLabel: this.resetInputButtonAriaLabel, disabled: this.disabled }, this.renderIcon('close')));
  }
  renderSearchButton() {
    const commonProps = {
      variant: ButtonVariant.TEXT,
      size: 'sm',
      class: `${this.classname}__search-button`,
      disabled: this.disabled,
      allyLabel: this.searchButtonAriaLabel,
      onClick: (event) => {
        this.vocaSearchButtonClicked.emit({ value: this.inputValue, event });
      },
    };
    switch (this.variant) {
      case SearchInputVariants.DEFAULT:
        return (h("telia-button", Object.assign({}, commonProps), this.renderIcon('search')));
      case SearchInputVariants.ADVANCED:
        return (h("telia-button", Object.assign({}, commonProps), this.searchButtonText));
    }
    return;
  }
  render() {
    const wrapperClasses = {
      [this.classname]: true,
      [`${this.classname}--${this.variant}`]: !!this.variant,
      [`${this.classname}--hasInput`]: !!this.inputValue,
      [`${this.classname}--isDisabled`]: this.disabled,
    };
    return (h("div", { class: wrapperClasses, role: "search" },
      h("telia-text-input", { class: `${this.classname}__input`, label: this.label, "aria-label": this.ariaLabel, disabled: this.disabled, placeholder: this.placeholder, "aria-placeholder": this.ariaPlaceholder, onInput: this.handleInput, value: this.inputValue, ref: ref => {
          this.inputElement = ref;
        } }),
      this.matchVariant(this.leadingIconVariants) &&
        this.renderIcon('search', `${this.classname}__leading-icon`, true),
      h("div", { class: `${this.classname}__button-wrapper` },
        !!this.inputValue && this.renderResetInputButton(),
        this.matchVariant(this.searchButtonVariants) &&
          this.renderSearchButton()),
      h("telia-vst", { dataTrackingId: `${this.classname}` })));
  }
  static get is() { return "telia-search-input"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["search-input.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["search-input.css"]
  }; }
  static get properties() { return {
    "placeholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Placeholder text"
      },
      "attribute": "placeholder",
      "reflect": false,
      "defaultValue": "'Search...'"
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Label"
      },
      "attribute": "label",
      "reflect": false
    },
    "variant": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "SearchInputVariantType",
        "resolved": "number | \"default\" | \"simple\" | \"advanced\" | { <S extends \"default\" | \"simple\" | \"advanced\">(predicate: (value: \"default\" | \"simple\" | \"advanced\", index: number, array: (\"default\" | \"simple\" | \"advanced\")[]) => value is S, thisArg?: any): S[]; (predicate: (value: \"default\" | \"simple\" | \"advanced\", index: number, array: (\"default\" | \"simple\" | \"advanced\")[]) => unknown, thisArg?: any): (\"default\" | \"simple\" | \"advanced\")[]; } | (<U>(callbackfn: (value: \"default\" | \"simple\" | \"advanced\", index: number, array: (\"default\" | \"simple\" | \"advanced\")[]) => U, thisArg?: any) => U[]) | (() => (\"default\" | \"simple\" | \"advanced\")[]) | (() => IterableIterator<\"default\" | \"simple\" | \"advanced\">) | (() => { copyWithin: boolean; entries: boolean; fill: boolean; find: boolean; findIndex: boolean; keys: boolean; values: boolean; }) | (() => string) | (() => string) | (() => \"default\" | \"simple\" | \"advanced\") | ((...items: (\"default\" | \"simple\" | \"advanced\")[]) => number) | { (...items: ConcatArray<\"default\" | \"simple\" | \"advanced\">[]): (\"default\" | \"simple\" | \"advanced\")[]; (...items: (\"default\" | \"simple\" | \"advanced\" | ConcatArray<\"default\" | \"simple\" | \"advanced\">)[]): (\"default\" | \"simple\" | \"advanced\")[]; } | ((separator?: string) => string) | (() => \"default\" | \"simple\" | \"advanced\") | ((start?: number, end?: number) => (\"default\" | \"simple\" | \"advanced\")[]) | ((compareFn?: (a: \"default\" | \"simple\" | \"advanced\", b: \"default\" | \"simple\" | \"advanced\") => number) => (\"default\" | \"simple\" | \"advanced\")[]) | { (start: number, deleteCount?: number): (\"default\" | \"simple\" | \"advanced\")[]; (start: number, deleteCount: number, ...items: (\"default\" | \"simple\" | \"advanced\")[]): (\"default\" | \"simple\" | \"advanced\")[]; } | ((...items: (\"default\" | \"simple\" | \"advanced\")[]) => number) | ((searchElement: \"default\" | \"simple\" | \"advanced\", fromIndex?: number) => number) | ((searchElement: \"default\" | \"simple\" | \"advanced\", fromIndex?: number) => number) | { <S extends \"default\" | \"simple\" | \"advanced\">(predicate: (value: \"default\" | \"simple\" | \"advanced\", index: number, array: (\"default\" | \"simple\" | \"advanced\")[]) => value is S, thisArg?: any): this is S[]; (predicate: (value: \"default\" | \"simple\" | \"advanced\", index: number, array: (\"default\" | \"simple\" | \"advanced\")[]) => unknown, thisArg?: any): boolean; } | ((predicate: (value: \"default\" | \"simple\" | \"advanced\", index: number, array: (\"default\" | \"simple\" | \"advanced\")[]) => unknown, thisArg?: any) => boolean) | ((callbackfn: (value: \"default\" | \"simple\" | \"advanced\", index: number, array: (\"default\" | \"simple\" | \"advanced\")[]) => void, thisArg?: any) => void) | { (callbackfn: (previousValue: \"default\" | \"simple\" | \"advanced\", currentValue: \"default\" | \"simple\" | \"advanced\", currentIndex: number, array: (\"default\" | \"simple\" | \"advanced\")[]) => \"default\" | \"simple\" | \"advanced\"): \"default\" | \"simple\" | \"advanced\"; (callbackfn: (previousValue: \"default\" | \"simple\" | \"advanced\", currentValue: \"default\" | \"simple\" | \"advanced\", currentIndex: number, array: (\"default\" | \"simple\" | \"advanced\")[]) => \"default\" | \"simple\" | \"advanced\", initialValue: \"default\" | \"simple\" | \"advanced\"): \"default\" | \"simple\" | \"advanced\"; <U>(callbackfn: (previousValue: U, currentValue: \"default\" | \"simple\" | \"advanced\", currentIndex: number, array: (\"default\" | \"simple\" | \"advanced\")[]) => U, initialValue: U): U; } | { (callbackfn: (previousValue: \"default\" | \"simple\" | \"advanced\", currentValue: \"default\" | \"simple\" | \"advanced\", currentIndex: number, array: (\"default\" | \"simple\" | \"advanced\")[]) => \"default\" | \"simple\" | \"advanced\"): \"default\" | \"simple\" | \"advanced\"; (callbackfn: (previousValue: \"default\" | \"simple\" | \"advanced\", currentValue: \"default\" | \"simple\" | \"advanced\", currentIndex: number, array: (\"default\" | \"simple\" | \"advanced\")[]) => \"default\" | \"simple\" | \"advanced\", initialValue: \"default\" | \"simple\" | \"advanced\"): \"default\" | \"simple\" | \"advanced\"; <U>(callbackfn: (previousValue: U, currentValue: \"default\" | \"simple\" | \"advanced\", currentIndex: number, array: (\"default\" | \"simple\" | \"advanced\")[]) => U, initialValue: U): U; } | { <S extends \"default\" | \"simple\" | \"advanced\">(predicate: (this: void, value: \"default\" | \"simple\" | \"advanced\", index: number, obj: (\"default\" | \"simple\" | \"advanced\")[]) => value is S, thisArg?: any): S; (predicate: (value: \"default\" | \"simple\" | \"advanced\", index: number, obj: (\"default\" | \"simple\" | \"advanced\")[]) => unknown, thisArg?: any): \"default\" | \"simple\" | \"advanced\"; } | ((predicate: (value: \"default\" | \"simple\" | \"advanced\", index: number, obj: (\"default\" | \"simple\" | \"advanced\")[]) => unknown, thisArg?: any) => number) | ((value: \"default\" | \"simple\" | \"advanced\", start?: number, end?: number) => (\"default\" | \"simple\" | \"advanced\")[]) | ((target: number, start: number, end?: number) => (\"default\" | \"simple\" | \"advanced\")[]) | (() => IterableIterator<[number, \"default\" | \"simple\" | \"advanced\"]>) | (() => IterableIterator<number>) | (() => IterableIterator<\"default\" | \"simple\" | \"advanced\">) | ((searchElement: \"default\" | \"simple\" | \"advanced\", fromIndex?: number) => boolean) | (<U, This = undefined>(callback: (this: This, value: \"default\" | \"simple\" | \"advanced\", index: number, array: (\"default\" | \"simple\" | \"advanced\")[]) => U | readonly U[], thisArg?: This) => U[]) | (<A, D extends number = 1>(this: A, depth?: D) => FlatArray<A, D>[])",
        "references": {
          "SearchInputVariantType": {
            "location": "import",
            "path": "../../types/SearchInputVariants"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Variant"
      },
      "attribute": "variant",
      "reflect": false,
      "defaultValue": "SearchInputVariants.DEFAULT"
    },
    "ariaLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Accessibility: aria-label for the input"
      },
      "attribute": "aria-label",
      "reflect": false,
      "defaultValue": "null"
    },
    "ariaPlaceholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Accessibility: aria-placeholder for the input"
      },
      "attribute": "aria-placeholder",
      "reflect": false
    },
    "searchButtonText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Text for \"Expressive\" variant search button"
      },
      "attribute": "search-button-text",
      "reflect": false,
      "defaultValue": "'Search'"
    },
    "searchButtonAriaLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Accessibility: aria-label for the search button"
      },
      "attribute": "search-button-aria-label",
      "reflect": false,
      "defaultValue": "'Search button'"
    },
    "resetInputButtonAriaLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Accessibility: aria-label for the reset input button"
      },
      "attribute": "reset-input-button-aria-label",
      "reflect": false,
      "defaultValue": "'Reset input button'"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Set button disabled"
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "inputValue": {}
  }; }
  static get events() { return [{
      "method": "vocaSearchButtonClicked",
      "name": "vocaSearchButtonClicked",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "The event emitted when \"search button\" is clicked on variants that support it"
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
}
