var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { h } from '@stencil/core';
import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
import chevronUp from '../../../../global/icons/chevron-up';
import chevronDown from '../../../../global/icons/chevron-down';
import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
import { htmlSanitizer, labelSanitizeStrategy } from '../../../../utils/sanitize';
/** The `VegaInputSelectDropdownRenderer` class is a TypeScript React component that renders a dropdown select input with various customization options. */
export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    this.renderContainer = () => {
      return (h("div", { role: 'button', class: "vega-input-select-container", ref: (ref) => (this.inputSelectContainer = ref), tabIndex: 0, "aria-disabled": `${this.disabled}`, onKeyDown: createEnterKeyHandlerToTriggerClick(), onBlur: this.preventBlur, part: "select-container" },
        this.renderPrefixIcon(),
        this.renderSelectContainer(),
        this.renderToggleIcon()));
    };
    this.renderPrefixIcon = () => {
      return this.vegaInputSelectPrefixIconRenderer.render();
    };
    this.renderToggleIcon = () => {
      return (h("div", { class: "vega-input-select-toggle-icon", part: "toggle-icon-container" },
        h("vega-icon", { part: "toggle-icon", icon: VegaInternalIconManager.getIconKey(this.isDropdownShow ? 'chevron-up' : 'chevron-down') })));
    };
    /* istanbul ignore next */
    this.renderSelectContainer = () => {
      var _a, _b;
      if (typeof this.selectedLabel !== 'function') {
        if (!((_a = this.selectedLabel) === null || _a === void 0 ? void 0 : _a.single)) {
          this.selectedLabel.single = (_value, selectedItem) => selectedItem.displayName;
        }
        if (!((_b = this.selectedLabel) === null || _b === void 0 ? void 0 : _b.multiple)) {
          this.selectedLabel.multiple = (value) => `${value.length} Selected`;
        }
      }
      return (h("div", { class: "vega-input-select-select-container" },
        h("div", { class: "vega-input-select-selected-box" }, this.selectType === 'multiple'
          ? this.renderMultipleSelected()
          : this.renderSingleSelected())));
    };
    this.renderMultipleSelected = () => {
      if (this.value.length > 0) {
        const selectedLabelStr = typeof this.selectedLabel == 'function'
          ? this.selectedLabel(this.value)
          : // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
            this.selectedLabel.multiple(this.value, this.selectedItem);
        return (h("span", { class: "vega-input-select-selected" },
          h("vega-text", { overflow: "ellipsis", tooltip: this.getSelectedLabelTooltipProps(), key: selectedLabelStr }, selectedLabelStr)));
      }
      else {
        return (h("div", { class: "vega-input-select-placeholder" }, this.translationSlimmer.t(this.placeholder)));
      }
    };
    this.renderSingleSelected = () => {
      var _a, _b;
      const selectedSourceItemItem = this.selectedItem;
      if (selectedSourceItemItem === null || selectedSourceItemItem === void 0 ? void 0 : selectedSourceItemItem.displayName) {
        selectedSourceItemItem.displayName = htmlSanitizer.sanitize(selectedSourceItemItem.displayName, labelSanitizeStrategy);
      }
      const selectedLabelStr = (_b = (_a = this.selectedLabel).single) === null || _b === void 0 ? void 0 : _b.call(_a, this.value, selectedSourceItemItem);
      if ((typeof this.selectedLabel == 'function' && this.selectedItem) ||
        (typeof this.selectedLabel != 'function' && selectedLabelStr)) {
        if (typeof this.selectedLabel == 'function') {
          return (h("span", { class: "vega-input-select-selected", part: "selected-box" },
            h("vega-text", { overflow: "ellipsis", tooltip: this.getSelectedLabelTooltipProps(), key: 
              // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
              selectedSourceItemItem.displayName }, 
            // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
            selectedSourceItemItem.displayName)));
        }
        else {
          return (h("span", { class: "vega-input-select-selected", part: "selected-box" },
            h("vega-text", { overflow: "ellipsis", tooltip: this.getSelectedLabelTooltipProps(), key: selectedLabelStr }, selectedLabelStr)));
        }
      }
      else {
        return (h("div", { class: "vega-input-select-placeholder", part: "placeholder" }, this.translationSlimmer.t(this.placeholder)));
      }
    };
    this.getVegaDropdownProperties = () => {
      const dropdownProperties = Object.assign({ searchable: true, caseSensitive: false }, this.vegaDropdownProps);
      if (this.dropdownItemTooltipProps && Object.keys(this.dropdownItemTooltipProps).length > 0) {
        dropdownProperties.itemTooltipProps = this.dropdownItemTooltipProps;
      }
      return dropdownProperties;
    };
    this.getSelectedLabelTooltipProps = () => {
      return Object.assign({ placement: 'bottom' }, this.selectedLabelTooltipProps);
    };
  }
  watchVegaDropdownProps() {
    if (this.vegaDropdownProps && this.vegaDropdownProps.preserveValueIfNotInSource !== undefined) {
      this.dropdown.preserveValueIfNotInSource = this.vegaDropdownProps.preserveValueIfNotInSource;
      this.dropdown.selectedSourceKey = this.value;
    }
  }
  show() {
    return this.dropdown.show();
  }
  hide() {
    return this.dropdown.hide();
  }
  getDropdownRef() {
    return this.dropdown;
  }
  getInputSelectContainerRef() {
    return this.inputSelectContainer;
  }
  getItemsSlotRef() {
    return this.itemsSlotRef;
  }
  render() {
    return (h("vega-dropdown", Object.assign({ trigger: "click", source: this.getDropdownSource(), selectType: this.selectType, selectedSourceKey: this.value, matchTargetWidth: true }, this.getVegaDropdownProperties(), { ref: (ref) => {
        this.dropdown = ref;
        this.vegaInputSelectDropdownController.addDropdownObserver(ref);
      }, isLazyLoading: this.isLazyLoading }),
      this.renderContainer(),
      this.renderItemsSlot()));
  }
  renderItemsSlot() {
    return (this.host.querySelector('[slot=items]') && (h("div", { slot: "items", ref: (ref) => {
        this.itemsSlotRef = ref;
      } })));
  }
  /*
   * The below method is e2e-test covered in
   * @see{module:vega-input-select-keyboard-control-e2e}
   */
  /* istanbul ignore next */
  preventBlur(e) {
    e.stopImmediatePropagation();
  }
  getDropdownSource() {
    return this.source.map((item) => ({
      key: item.id,
      label: item.displayName,
    }));
  }
}
(() => {
  VegaInternalIconManager.register({
    'chevron-up': chevronUp,
    'chevron-down': chevronDown,
  });
})();
__decorate([
  MapToComponentField()
], VegaInputSelectDropdownRenderer.prototype, "value", void 0);
__decorate([
  MapToComponentField()
], VegaInputSelectDropdownRenderer.prototype, "source", void 0);
__decorate([
  MapToComponentField()
], VegaInputSelectDropdownRenderer.prototype, "host", void 0);
__decorate([
  MapToComponentField()
], VegaInputSelectDropdownRenderer.prototype, "selectType", void 0);
__decorate([
  MapToComponentField()
], VegaInputSelectDropdownRenderer.prototype, "isDropdownShow", void 0);
__decorate([
  MapToComponentField()
], VegaInputSelectDropdownRenderer.prototype, "vegaDropdownProps", void 0);
__decorate([
  MapToComponentField()
], VegaInputSelectDropdownRenderer.prototype, "placeholder", void 0);
__decorate([
  MapToComponentField()
], VegaInputSelectDropdownRenderer.prototype, "selectedLabel", void 0);
__decorate([
  MapToComponentField()
], VegaInputSelectDropdownRenderer.prototype, "isLazyLoading", void 0);
__decorate([
  MapToComponentField()
], VegaInputSelectDropdownRenderer.prototype, "vegaInputSelectDropdownController", void 0);
__decorate([
  MapToComponentField()
], VegaInputSelectDropdownRenderer.prototype, "vegaInputSelectPrefixIconRenderer", void 0);
__decorate([
  MapToComponentField()
], VegaInputSelectDropdownRenderer.prototype, "translationSlimmer", void 0);
__decorate([
  MapToComponentField()
], VegaInputSelectDropdownRenderer.prototype, "disabled", void 0);
__decorate([
  MapToComponentField()
], VegaInputSelectDropdownRenderer.prototype, "selectedItem", void 0);
__decorate([
  MapToComponentField()
], VegaInputSelectDropdownRenderer.prototype, "selectedLabelTooltipProps", void 0);
__decorate([
  MapToComponentField()
], VegaInputSelectDropdownRenderer.prototype, "dropdownItemTooltipProps", void 0);
__decorate([
  MapToComponentMethod('watchVegaDropdownProps')
], VegaInputSelectDropdownRenderer.prototype, "watchVegaDropdownProps", null);
