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 { Fragment, h } from '@stencil/core';
import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
import { htmlSanitizer, labelSanitizeStrategy } from '../../../../../utils/sanitize';
export class VegaDropdownItemRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    this.setLabelRef = (ref) => {
      if (ref) {
        this.labelRef = ref;
      }
    };
  }
  render() {
    return (h("li", { key: this.label, role: "menuitem", "aria-label": this.count > 0 ? `${this.label}, ${this.count}` : this.label, "aria-disabled": `${this.disabled}`, class: {
        'vega-dropdown-item-selected': this.selected,
        'vega-dropdown-item-disabled': this.disabled,
        [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
        'danger': this.danger && this.selectType === 'none',
      }, tabIndex: this.disabled ? -1 : 0, 
      /* eslint-disable-next-line react/jsx-no-bind */
      onClick: this.disabled ? undefined : (e) => this.onSelect(e), onKeyDown: createEnterKeyHandlerToTriggerClick({ preventDefault: true }), style: this.height > 0 && {
        height: `${this.height}px`,
        boxSizing: 'border-box',
        overflow: 'hidden',
      } },
      this.renderSelectIcon(),
      this.renderPrefixIcon(),
      this.itemDisplayRule === 'ellipsis' ? this.renderLabelWithTooltip() : this.renderLabel(),
      this.renderCounter()));
  }
  renderSelectIcon() {
    return (this.selectType !== 'none' && (h("span", { class: "selected-prefix" },
      this.selectType === 'single' && this.renderSingleSelectIcon(),
      this.selectType === 'multiple' && this.renderMultipleSelectIcon())));
  }
  renderSingleSelectIcon() {
    return this.selected && h("vega-icon", { icon: "checkmark", size: "size-16" });
  }
  renderMultipleSelectIcon() {
    return h("vega-checkbox", { size: "small", checked: this.selected, disabled: this.disabled });
  }
  renderPrefixIcon() {
    return ((this.prefixIcon || this.prefixIconSlot) && (h("div", { class: "item-prefix" }, this.renderItemPrefixIcon())));
  }
  renderItemPrefixIcon() {
    return this.prefixIcon && h("vega-icon", { icon: this.prefixIcon, size: "size-16" });
  }
  renderLabel() {
    // We prioritize slots, and when both slots and labels are defined, we can collect label information for component display,
    // such as input select selected item display
    if (this.host.childElementCount > 0 || this.host.textContent.trim() !== '') {
      return (h("span", { class: "vega-dropdown-item-label", ref: this.setLabelRef },
        h("slot", null)));
    }
    else {
      return (h(Fragment, null,
        h("span", { class: "vega-dropdown-item-label", innerHTML: htmlSanitizer.sanitize(this.label, labelSanitizeStrategy), ref: this.setLabelRef }),
        h("span", { class: "v-hidden" },
          h("slot", null))));
    }
  }
  renderCounter() {
    return (this.count > 0 && (h("div", { class: "item-counter" },
      h("vega-counter-badge", { count: this.count, color: "bg-action", offset: [10, 10] }))));
  }
  onSelect(e) {
    this.vegaDropdownItemClickController.handleClick(e);
  }
  renderLabelWithTooltip() {
    var _a, _b, _c;
    if (!this.label) {
      return this.renderLabel();
    }
    return (h("vega-tooltip", { ref: (ref) => {
        if (ref) {
          this.tooltipRef = ref;
        }
      }, text: htmlSanitizer
        .sanitize(this.label, labelSanitizeStrategy)
        .replace(/<b>(.*?)<\/b>/g, '$1'), trigger: "none", placement: ((_a = this.itemTooltipProps) === null || _a === void 0 ? void 0 : _a.placement) || ['bottom', 'top'], alignment: "center", maxWidth: (_b = this.itemTooltipProps) === null || _b === void 0 ? void 0 : _b.maxWidth, minWidth: (_c = this.itemTooltipProps) === null || _c === void 0 ? void 0 : _c.minWidth, 
      /* eslint-disable-next-line react/jsx-no-bind */
      onMouseEnter: () => {
        const isTextTruncated = this.labelRef.scrollWidth > this.labelRef.clientWidth;
        if (isTextTruncated) {
          this.tooltipRef.trigger = 'hover';
          // Disable the system tooltip for Safari when using text-overflow: ellipsis and hover on the text.
          // Use js to set pointerEvents instead of css here to avoid user build a custom tooltip for slot content.
          this.labelRef.style.pointerEvents = 'none';
        }
      }, 
      /* eslint-disable-next-line react/jsx-no-bind */
      onMouseLeave: () => {
        this.tooltipRef.trigger = 'none';
        this.labelRef.style.pointerEvents = 'auto';
      } }, this.renderLabel()));
  }
}
__decorate([
  MapToComponentField()
], VegaDropdownItemRenderer.prototype, "host", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownItemRenderer.prototype, "label", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownItemRenderer.prototype, "count", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownItemRenderer.prototype, "prefixIcon", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownItemRenderer.prototype, "prefixIconSlot", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownItemRenderer.prototype, "disabled", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownItemRenderer.prototype, "selected", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownItemRenderer.prototype, "selectType", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownItemRenderer.prototype, "height", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownItemRenderer.prototype, "itemDisplayRule", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownItemRenderer.prototype, "itemTooltipProps", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownItemRenderer.prototype, "danger", void 0);
__decorate([
  MapToComponentField()
], VegaDropdownItemRenderer.prototype, "vegaDropdownItemClickController", void 0);
