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, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
import trashCan from '../../../../../global/icons/trash-can';
import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
import { VegaChange, VegaClick, VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
import { findParent } from '../../../../../utils/ui';
import changeManager from '../../../../../helpers/change-manager/change-manager';
import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
import { VegaInternalRichTextImageClick, VegaInternalRichTextImageDeleteButtonClicked, } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
export class VegaRichTextImageEditorRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    this.handleKeyDown = (e) => {
      if (e.key === 'Enter') {
        void this.formRef.getValue().then(({ alt }) => {
          this.changeEventEmitter.emit({ action: 'edit', payload: { size: this.size, alt: alt } });
        });
        void this.popoverRef.hide();
      }
    };
  }
  render() {
    return (h("vega-popover", { style: { width: '100%' }, trigger: "click", alignment: "start", placement: "bottom", showArrow: false, isScreenPosition: true, ref: (ref) => {
        this.popoverRef = ref;
        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
          this.selected = true;
          this.notifyImageSelected();
          void this.formRef.setValue({
            alt: this.alt,
          });
        });
        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, () => {
          this.currentPage = 1;
          this.selected = false;
          void this.formRef.reset();
        });
      } },
      h("div", { slot: "popover-content" },
        h("slot", null)),
      h("div", { slot: "popover" },
        this.renderImageEditor(),
        this.renderAltTextEditor())));
  }
  findParentContainerRef() {
    this.parentContainerRef = findParent(this.host, 'vega-rich-text-content');
  }
  renderImageEditor() {
    return (h("vega-box", { display: this.currentPage === 1 ? 'block' : 'none' },
      h("vega-flex", { gap: "size-12", alignItems: "center" },
        h("vega-font", { variant: "font-field-label-sm", color: "text-primary" },
          this.translationSlimmer.t('Size'),
          ":"),
        h("vega-segment-control", { size: "small", segments: [
            { key: 'sm', text: this.translationSlimmer.t('Sm') },
            { key: 'md', text: this.translationSlimmer.t('Md') },
            { key: 'lg', text: this.translationSlimmer.t('Lg') },
          ], selected: this.size, ref: (ref) => {
            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => {
              // The below line is covered in `history.spec#should register history, and undo/redo for image size change`
              // Prevent handling vegaChange triggered by DOM ref reuse (e.g., undo/redo) when the image editor is not visible.
              if (!this.selected)
                return;
              const size = e.detail;
              this.size = size;
              this.changeEventEmitter.emit({
                action: 'edit',
                payload: { size: size, alt: this.alt },
              });
            });
          } }),
        h("vega-button-group", { variant: "tertiary", size: "small", ref: (ref) => {
            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (payload) => {
              if (payload.detail === 'Alt Text') {
                this.currentPage = 2;
              }
              else {
                this.notifyImageDeleteButtonClicked();
                this.changeEventEmitter.emit({ action: 'delete' });
                void this.popoverRef.hide();
              }
            });
          } },
          h("vega-button-group-item", { label: this.translationSlimmer.t('Alt Text'), itemKey: "Alt Text" }),
          h("vega-button-group-item", { label: this.translationSlimmer.t('Delete Image'), icon: VegaInternalIconManager.getIconKey('trash-can'), iconOnly: true, itemKey: "trash-can" })))));
  }
  renderAltTextEditor() {
    return (h("vega-box", { display: this.currentPage === 2 ? 'block' : 'none' },
      h("vega-form", { ref: (ref) => (this.formRef = ref) },
        h("vega-input", { "data-vega-form": "alt", style: { width: '315px' }, label: this.translationSlimmer.t('Alt Text'), ref: (ref) => {
            void ref.doFocus();
          }, onKeyDown: this.handleKeyDown }))));
  }
  notifyImageSelected() {
    if (this.parentContainerRef) {
      changeManager.notify(domNodeSubjectFactory.getSubject(this.parentContainerRef, VegaInternalRichTextImageClick), { host: this.host });
    }
  }
  /*
   * The below method is e2e-test covered in
   * {module:vega-rich-text-editor-image-click-delete-button}
   */
  /* istanbul ignore next */
  notifyImageDeleteButtonClicked() {
    if (this.parentContainerRef) {
      changeManager.notify(domNodeSubjectFactory.getSubject(this.parentContainerRef, VegaInternalRichTextImageDeleteButtonClicked), { host: this.host });
    }
  }
}
(() => {
  VegaInternalIconManager.register({ 'trash-can': trashCan });
})();
__decorate([
  MapToComponentField({ writable: true })
], VegaRichTextImageEditorRenderer.prototype, "currentPage", void 0);
__decorate([
  MapToComponentField({ writable: true })
], VegaRichTextImageEditorRenderer.prototype, "selected", void 0);
__decorate([
  MapToComponentField()
], VegaRichTextImageEditorRenderer.prototype, "host", void 0);
__decorate([
  MapToComponentField()
], VegaRichTextImageEditorRenderer.prototype, "alt", void 0);
__decorate([
  MapToComponentField({ writable: true })
], VegaRichTextImageEditorRenderer.prototype, "size", void 0);
__decorate([
  MapToComponentField()
], VegaRichTextImageEditorRenderer.prototype, "changeEventEmitter", void 0);
__decorate([
  MapToComponentField()
], VegaRichTextImageEditorRenderer.prototype, "translationSlimmer", void 0);
__decorate([
  MapToComponentMethod('componentDidLoad')
], VegaRichTextImageEditorRenderer.prototype, "findParentContainerRef", null);
