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 { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
import text from '../../../assets/text';
import { MapToComponentField } from 'vega-slimmer/core';
import { RTETextNode } from '../../../dto/nodes/text-node';
import { TextColorAnnotationAction } from '../../../dto/actions/text-color-annotation-action';
import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
import { VegaChange, VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
import { VegaDarkModeStyleController } from '../../../../../helpers/theme/controllers/dark-mode-style-controller';
import { RTE_TEXT_COLORS } from '../../../constants/constant';
import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
export class TextColorToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
  constructor() {
    super({
      icon: 'text',
      tooltip: { text: 'Text Color' },
    });
    this.popoverShow = false;
    VegaDarkModeStyleController.registerCustomDarkModeColor(TextColorToolbarButtonSlimmer.formatDarkModeColor());
  }
  static formatDarkModeColor() {
    return RTE_TEXT_COLORS.reduce((prev, current) => {
      current.dark && (prev[`rich-text-editor-${current.key}`] = current.dark);
      return prev;
    }, {});
  }
  renderSlotContent() {
    return (h("div", { class: {
        'toolbar-btn-color-preview-box': true,
        'disabled': this.isDisabled(),
      }, style: {
        backgroundColor: this.getCurrentColor(),
      } }));
  }
  handlePopoverShowChange() {
    this.popoverShow = true;
  }
  handlePopoverHideChange() {
    this.popoverShow = false;
  }
  renderBtnWrapper(renderBtn) {
    return (h("vega-popover", { placement: "bottom", alignment: "center", ref: (ref) => {
        this.popoverRef = ref;
        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, this.handlePopoverShowChange.bind(this));
        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, this.handlePopoverHideChange.bind(this));
      } },
      h("div", { slot: "popover-content" }, renderBtn({
        showArrowIcon: false,
      })),
      h("div", Object.assign({ slot: "popover", style: { userSelect: 'none' } }, super.preventLostFocus()), this.renderPopoverContent())));
  }
  renderPopoverContent() {
    return (h("vega-color-picker", { isInline: true, colors: RTE_TEXT_COLORS.map((item) => item[!this.isInDarkMode ? 'light' : 'dark']), ref: (ref) => {
        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handleChange.bind(this));
      }, value: this.getCurrentColor() }));
  }
  async handleChange(e) {
    if (this.popoverShow) {
      if (!this.selectionController.getSelectedNodes().length) {
        await this.focusController.focusOnLastTextNode();
      }
      this.selectionController
        .getSelectedNodes()
        .filter((node) => node instanceof RTETextNode)
        .forEach((node) => node.apply(new TextColorAnnotationAction(this.matchColor(e.detail).key)));
    }
    void this.popoverRef.hide();
  }
  matchColor(value) {
    return RTE_TEXT_COLORS.find((item) => item[this.isInDarkMode ? 'dark' : 'light'] === value);
  }
  getCurrentColor() {
    let selectedItem = RTE_TEXT_COLORS[0];
    const selectedNodes = this.selectionController.getSelectedNodes();
    if (selectedNodes.length > 1) {
      if (this.isSelectedSameColor(selectedNodes)) {
        selectedItem = this.getTextColor(selectedNodes[0]);
      }
      else {
        selectedItem = null;
      }
    }
    if (selectedNodes.length === 1) {
      selectedItem = this.getTextColor(selectedNodes[0]);
    }
    return selectedItem ? selectedItem[!this.isInDarkMode ? 'light' : 'dark'] : null;
  }
  isSelected() {
    return false;
  }
  isSelectedSameColor(selectedNodes) {
    return selectedNodes.every((node) => this.getTextColor(node).key === this.getTextColor(selectedNodes[0]).key);
  }
  getTextColor(selectedNodes) {
    var _a;
    return (((_a = selectedNodes.getAnnotationByType('TEXT_COLOR')) === null || _a === void 0 ? void 0 : _a.textColor) ||
      RTE_TEXT_COLORS[0]);
  }
  isDisabled() {
    const selectedNodes = this.selectionController.getSelectedNodes();
    return (super.isDisabled() ||
      selectedNodes.some((node) => {
        var _a;
        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
          node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
          this.shouldDisabledToolbar(node, TextColorAnnotationAction.name);
      }));
  }
}
(() => {
  VegaInternalIconManager.register({
    text,
  });
})();
__decorate([
  MapToComponentField()
], TextColorToolbarButtonSlimmer.prototype, "host", void 0);
__decorate([
  MapToComponentField()
], TextColorToolbarButtonSlimmer.prototype, "isInDarkMode", void 0);
__decorate([
  MapToComponentField()
], TextColorToolbarButtonSlimmer.prototype, "selectionController", void 0);
__decorate([
  MapToComponentField()
], TextColorToolbarButtonSlimmer.prototype, "focusController", void 0);
