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 { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
import { h } from '@stencil/core';
import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
import { VegaClick, VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
export class ColorSwatchPickerRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    /**
     * Synchronizes the internal color state with the value prop each time the popover is shown, ensuring that the color swatch grid and input reflect the current value when opened.
     */
    this.handlePopoverShow = () => {
      DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.popoverRef, VegaPopoverShow, () => {
        this.isPopoverOpen = true;
        if (this.internalColor !== this.value) {
          this.colorSwatchPickerValueController.updateInternalColor(this.value);
        }
      });
    };
    /**
     * Updates the aria-expanded attribute of the color swatch to false when the popover is hidden.
     */
    this.handlePopoverHide = () => {
      DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.popoverRef, VegaPopoverHide, () => {
        this.isPopoverOpen = false;
      });
    };
    /**
     * Clear or apply button click handler.
     *
     * @param {HTMLVegaButtonLinkElement} btn - The button element that was clicked.
     */
    this.registerButtonClickHandler = (btn) => {
      DomNodeSubjectObserverFactory.addUniqueObserverToNode(btn, VegaClick, () => {
        this.popoverRef && this.popoverRef.hide();
        const action = btn.dataset.actionType;
        const newValue = action === 'clear' ? '' : this.internalColor;
        this.colorSwatchPickerValueController.updateValue(newValue);
      });
    };
  }
  /**
   * Hides the color swatch picker popover.
   */
  hidePopover() {
    this.popoverRef && this.popoverRef.hide();
  }
  /**
   * Gets the reference to the container element of the color swatch picker, which can be used for positioning the popover or other related functionalities.
   *
   * @returns {HTMLDivElement} The container element of the color swatch picker.
   */
  getContainerRef() {
    return this.containerRef;
  }
  /**
   * Gets the reference to the left container element inside the popover.
   *
   * @returns {HTMLDivElement} The left container element.
   */
  getLeftContainerRef() {
    return this.leftContainerRef;
  }
  render() {
    const hasLeftSlot = this.leftSlotProjection.hasSlot();
    return (h("div", { ref: (el) => (this.containerRef = el), class: "swatch-picker-container" },
      h("vega-popover", { ref: (el) => {
          this.popoverRef = el;
          this.handlePopoverShow();
          this.handlePopoverHide();
        }, class: "swatch-popover", alignment: "center", isScreenPosition: true, trigger: "click" },
        h("div", { slot: "popover-content" },
          h("vega-color-swatch", { class: "swatch-picker-trigger", "aria-expanded": this.isPopoverOpen ? 'true' : 'false', "aria-haspopup": "dialog", disabled: this.disabled, color: this.value, size: "small" })),
        h("vega-box", { slot: "popover", class: "swatch-popover-content", width: "min-content" },
          h("vega-flex", { gap: "size-16" },
            hasLeftSlot && (h("div", { ref: (el) => (this.leftContainerRef = el) })),
            hasLeftSlot && (h("div", null,
              h("vega-divider", { direction: "vertical" }))),
            h("div", null,
              this.colorSwatchInputRenderer.render(),
              this.colorSwatchGridRenderer.render(),
              this.renderButtonGroup())))),
      h("vega-field-label", { label: this.label, disabled: this.disabled, isFieldRequired: this.required })));
  }
  renderButtonGroup() {
    return (h("vega-flex", { gap: "size-8", justifyContent: "end", margin: { top: 'size-16' } },
      this.showClearButton && (h("vega-button-link", { ref: this.registerButtonClickHandler, "data-action-type": "clear", label: this.translationSlimmer.t('Clear'), size: "small" })),
      h("vega-button-link", { ref: this.registerButtonClickHandler, "data-action-type": "apply", label: this.translationSlimmer.t('Apply'), size: "small" })));
  }
}
__decorate([
  MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "host", void 0);
__decorate([
  MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "value", void 0);
__decorate([
  MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "internalColor", void 0);
__decorate([
  MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "label", void 0);
__decorate([
  MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "required", void 0);
__decorate([
  MapToComponentField({ writable: true })
], ColorSwatchPickerRenderer.prototype, "isPopoverOpen", void 0);
__decorate([
  MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "disabled", void 0);
__decorate([
  MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "showClearButton", void 0);
__decorate([
  MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "colorSwatchGridRenderer", void 0);
__decorate([
  MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "colorSwatchInputRenderer", void 0);
__decorate([
  MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "colorSwatchPickerValueController", void 0);
__decorate([
  MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "translationSlimmer", void 0);
__decorate([
  MapToComponentField()
], ColorSwatchPickerRenderer.prototype, "leftSlotProjection", void 0);
