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, VegaSlimmer } from 'vega-slimmer/core';
import { TinyColorPolyfill } from '../../../../polyfill/tinycolor/tinycolor-polyfill';
import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
import internalVegaEventManager from '../../../../helpers/event-manager/internal-vega-event-manager';
/**
 * Renderer slimmer for vega-color-swatch.
 */
export class VegaColorSwatchRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    /**
     * Handler for click event on the swatch. It will emit the click event to the parent component if the swatch is not disabled.
     *
     * @param {MouseEvent} e The click event.
     */
    this.handleClick = (e) => {
      if (this.disabled) {
        e.stopPropagation();
        return;
      }
      // Prevent the click event from bubbling up to avoid duplicate events if the event semantics namespace is not 'vega'.
      if (internalVegaEventManager.getSemantics(this.host).namespace !== 'vega') {
        e.stopPropagation();
      }
      this.clickEventEmitter.emit();
    };
  }
  /**
   * Render function for the slimmer. It will be called by the component to render the content.
   *
   * @returns {HTMLElement} The rendered content.
   */
  render() {
    const isClearView = this.variant === 'clear';
    const colorExists = !isClearView && !!this.color;
    return (h("div", { class: {
        'vega-color-swatch-container': true,
        [`size-${this.size}`]: true,
        [`shape-${this.shape}`]: true,
        'swatch-clear': isClearView,
      }, role: "button", "aria-label": this.getAriaLabel(), "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: createEnterKeyHandlerToTriggerClick() },
      h("div", { class: "swatch" },
        colorExists && h("span", { class: "color-fill", style: this.getFillColorStyles() }),
        isClearView && h("span", { class: "clear-line" }),
        this.selected && !isClearView && (h("vega-icon", { class: "check-icon", icon: "checkmark", size: "size-16", color: this.getCheckMarkColor() }))),
      this.label && this.renderLabel()));
  }
  renderLabel() {
    return (h("vega-font", { class: "swatch-label", variant: "font-field-value", color: this.disabled ? 'text-disabled' : 'text-primary' }, this.label));
  }
  /**
   * Get the appropriate aria-label for the swatch based on the provided props.
   *
   * @returns {string} The aria-label for the swatch.
   */
  getAriaLabel() {
    if (this.label)
      return this.label;
    if (this.variant === 'clear')
      return this.translationSlimmer.t('Clear color');
    if (this.color)
      return this.translationSlimmer.t('Color {0}', this.color);
    return this.translationSlimmer.t('Color swatch');
  }
  /**
   * Get the fill color styles for the swatch.
   *
   * @returns {Record<string, string>} The styles for the swatch fill.
   */
  getFillColorStyles() {
    const styles = {};
    if (this.color) {
      styles.backgroundColor = this.color;
    }
    return styles;
  }
  /**
   * The check mark color will automatically adjust to maintain contrast against the swatch color. If no color is provided, it defaults to 'text-primary'.
   *
   * @returns {TextColorsTokenType} The appropriate check mark color.
   */
  getCheckMarkColor() {
    if (!this.color)
      return 'text-primary';
    const textBlack = 'text-black';
    const textWhite = 'text-white';
    const isColorDark = new TinyColorPolyfill(this.color).isDark();
    return isColorDark ? textWhite : textBlack;
  }
}
__decorate([
  MapToComponentField()
], VegaColorSwatchRenderer.prototype, "host", void 0);
__decorate([
  MapToComponentField()
], VegaColorSwatchRenderer.prototype, "variant", void 0);
__decorate([
  MapToComponentField()
], VegaColorSwatchRenderer.prototype, "label", void 0);
__decorate([
  MapToComponentField()
], VegaColorSwatchRenderer.prototype, "color", void 0);
__decorate([
  MapToComponentField()
], VegaColorSwatchRenderer.prototype, "selected", void 0);
__decorate([
  MapToComponentField()
], VegaColorSwatchRenderer.prototype, "size", void 0);
__decorate([
  MapToComponentField()
], VegaColorSwatchRenderer.prototype, "disabled", void 0);
__decorate([
  MapToComponentField()
], VegaColorSwatchRenderer.prototype, "shape", void 0);
__decorate([
  MapToComponentField()
], VegaColorSwatchRenderer.prototype, "clickEventEmitter", void 0);
__decorate([
  MapToComponentField()
], VegaColorSwatchRenderer.prototype, "translationSlimmer", void 0);
