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 { MapToComponentMethod } from 'vega-slimmer/core';
import { DomNodeSubjectObserverFactory } from '../../../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
import { VegaClick } from '../../../../../../../helpers/event-manager/event-id/vega-event-id';
import { VegaRichTextTablePropertiesBaseFormFieldRenderer } from './vega-rich-text-table-properties-basic-form-field-renderer.abstract';
export class VegaRichTextCellPropertiesFormFieldRenderer extends VegaRichTextTablePropertiesBaseFormFieldRenderer {
  constructor() {
    super(...arguments);
    this.changesNeedApply = {};
    /**
     * Emit a change event on each form field value change.
     *
     * @param {string} fieldName - The name of the changed field.
     * @param {RTETablePropertiesType} formData - The current form data.
     */
    this.emitFormDataChange = (fieldName, formData) => {
      this.vegaChange.emit(this.mergeFormDataWithStyleMap({
        [fieldName]: formData[fieldName],
      }));
    };
    /**
     * Emit save event on save button click.
     *
     * @param {HTMLVegaButtonLinkElement} btn - The save button element.
     */
    this.handleSave = (btn) => {
      DomNodeSubjectObserverFactory.addUniqueObserverToNode(btn, VegaClick, () => {
        this.vegaSave.emit();
      });
    };
    /**
     * Emit cancel event on cancel button click.
     *
     * @param {HTMLVegaButtonLinkElement} btn - The cancel button element.
     */
    this.handleCancel = (btn) => {
      DomNodeSubjectObserverFactory.addUniqueObserverToNode(btn, VegaClick, () => {
        this.vegaCancel.emit(this.styleMap);
      });
    };
  }
  onDefaultValueChange() {
    this.resetChangesNeedApply();
  }
  /**
   * Render cell properties fields.
   *
   * @returns {HTMLElement} The cell properties fields element.
   */
  renderPropertiesFields() {
    return (h(Fragment, null,
      h("vega-font", { variant: "font-h6", color: "text-primary" }, "Cell properties"),
      h("vega-divider", { direction: "horizontal" }),
      super.renderBorderFields(),
      h("vega-divider", { direction: "horizontal" }),
      super.renderBackgroundColorPicker(),
      h("vega-divider", { direction: "horizontal" }),
      this.renderDimensionFields(true),
      h("vega-divider", { direction: "horizontal" }),
      this.renderTextAlignmentField(),
      h("vega-divider", { direction: "horizontal" }),
      this.renderActionButtons()));
  }
  /**
   * Render style text alignment field.
   *
   * @returns { HTMLElement } The text alignment field element.
   */
  renderTextAlignmentField() {
    return (h("div", { class: "text-alignment-container" },
      h("vega-font", { variant: "font-field-label", color: "text-primary" }, "Text Alignment"),
      h("vega-flex", { direction: "row", gap: "size-16" },
        this.renderAlignmentField(['left', 'center', 'right', 'justify'], 'align-', 'textAlign'),
        this.renderAlignmentField(['top', 'middle', 'bottom'], 'align-', 'verticalAlign'))));
  }
  /**
   * Merge form data with style map for all selected cell blocks.
   *
   * @param {RTETablePropertiesType} formData - The form data.
   * @returns {Record<string, RTETablePropertiesType>} The merged data.
   */
  mergeFormDataWithStyleMap(formData) {
    this.changesNeedApply = Object.assign(Object.assign({}, this.changesNeedApply), formData);
    const mergedData = {};
    for (const id in this.styleMap) {
      mergedData[id] = Object.assign(Object.assign({}, this.styleMap[id]), this.changesNeedApply);
    }
    return mergedData;
  }
  /**
   * Reset the changesNeedApply object.
   *
   */
  resetChangesNeedApply() {
    this.changesNeedApply = {};
  }
}
__decorate([
  MapToComponentMethod('watchDefaultValueChange')
], VegaRichTextCellPropertiesFormFieldRenderer.prototype, "onDefaultValueChange", null);
