import { V as VegaRTEContent } from './content-state-cc491c0b.js';
import { V as VegaRTEToolbarButtonRenderer, b as VegaRTEExtension } from './base-toolbar-button-renderer-74c2b49e.js';
import './global-slimmer-registry-0a7aa308.js';

/**
 * Toolbar button renderer for language selection in Vega Rich Text Editor.
 */
class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
  constructor(languageList, languageChangeCallback, selectedLanguage) {
    super();
    this.languageList = [];
    this.selectedLanguage = 'Select Language';
    this.labelRef = null;
    /**
     * Handles the language selection event.
     *
     * @param {string} itemKey - The key of the selected language item.
     */
    this.handleDropdownClick = (itemKey) => {
      this.setSelectedLanguage(itemKey);
      if (typeof this.languageChangeCallback === 'function') {
        this.languageChangeCallback(this.selectedLanguage);
      }
    };
    this.languageList = languageList;
    this.selectedLanguage = selectedLanguage;
    this.languageChangeCallback = languageChangeCallback;
  }
  /**
   * Public method to set the selected language.
   *
   * @param {string} language The language key to set as selected.
   */
  setSelectedLanguage(language) {
    this.selectedLanguage = language;
    if (this.labelRef) {
      this.labelRef.textContent = this.getLanguageLabelByKey(language);
    }
  }
  /**
   * The source edit mode does not affect the language button visibility.
   *
   * @returns {boolean} True if the button is hidden, false otherwise.
   */
  isHidden() {
    return false;
  }
  /**
   * @inheritDoc
   */
  render(createElement, editorContext) {
    return this.renderDropdown(createElement, editorContext, { source: this.languageList }, [
      this.renderButton(createElement, editorContext, {
        label: this.getLanguageLabelByKey(this.selectedLanguage),
        showArrowIcon: true,
      }),
    ]);
  }
  /**
   * Override to render the button label with custom behavior.
   *
   * @inheritDoc
   */
  renderButtonLabel(h, editorContext, label) {
    const isDisabled = this.isDisabled(editorContext);
    return h('vega-font', {
      variant: 'font-field-label-sm',
      color: isDisabled ? 'text-disabled' : 'text-primary',
      // eslint-disable-next-line jsdoc/require-jsdoc
      ref: (el) => (this.labelRef = el),
    }, label);
  }
  /* istanbul ignore next */
  /**
   * Handles the button click event. No need this method for language button.
   *
   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
   */
  handleButtonClick(editorContext) {
  }
  /**
   * Gets the label of a language by its key.
   *
   * @param {string} key The language key to look up.
   * @returns {string} The label of the language, or the key if not found.
   */
  getLanguageLabelByKey(key) {
    const language = this.getListItemByKey(this.languageList, key);
    return language.label;
  }
}

/**
 * Language extension for Vega Rich Text Editor.
 * This extension allows users to switch between different languages and maintain separate content for each language.
 */
class VegaRTELanguageExtension extends VegaRTEExtension {
  constructor(languageList, languagesState) {
    super();
    this.languageState = {
      selectedLanguage: '',
      contentMap: {},
    };
    /**
     * Listener for language change events from the toolbar button renderer.
     *
     * @param {string} selectedLanguage - The newly selected language.
     */
    this.languageChangeCallBack = (selectedLanguage) => {
      const previousLanguage = this.languageState.selectedLanguage;
      if (this.extensionContext && previousLanguage) {
        this.languageState.contentMap[previousLanguage] = this.getRTELatestValue(this.extensionContext.host);
      }
      this.languageState.selectedLanguage = selectedLanguage;
      this.applyLanguageContent(selectedLanguage, this.languageState.contentMap);
    };
    if (languagesState) {
      this.languageState = Object.assign(Object.assign({}, this.languageState), languagesState);
    }
    if (!this.languageState.selectedLanguage && languageList.length > 0) {
      this.languageState.selectedLanguage = languageList[0].key;
    }
    this.languageToolbarButtonRenderer = new RTELanguageToolbarButtonRenderer(languageList, this.languageChangeCallBack, this.languageState.selectedLanguage);
    this.registerToolbarButtonRenderer('languages', this.languageToolbarButtonRenderer);
  }
  /**
   * Initializes the language extension.
   * Applies the content for the selected language upon initialization.
   *
   * @param {RTEExtensionContext} context The extension context.
   */
  initialExtension(context) {
    super.initialExtension(context);
    const { selectedLanguage, contentMap } = this.languageState;
    if (contentMap && contentMap[selectedLanguage]) {
      this.applyLanguageContent(this.languageState.selectedLanguage, this.languageState.contentMap);
    }
  }
  /**
   * Invoked to set the language extension state. The method used if the state can not be provide when the editor is initialized.
   *
   * @param {RTELanguageExtensionState} state The language extension state to set.
   */
  setState(state) {
    const { selectedLanguage, contentMap } = state;
    this.languageToolbarButtonRenderer.setSelectedLanguage(selectedLanguage);
    this.languageState.selectedLanguage = selectedLanguage;
    this.languageState.contentMap = Object.assign({}, contentMap);
    this.applyLanguageContent(selectedLanguage, contentMap);
  }
  /**
   * Invoked to get the language extension state.
   *
   * @returns {RTELanguageExtensionState} The current language extension state.
   */
  getState() {
    const { selectedLanguage, contentMap } = this.languageState;
    if (this.extensionContext) {
      contentMap[selectedLanguage] = this.getRTELatestValue(this.extensionContext.host);
    }
    return this.languageState;
  }
  /**
   * Applies the content for the selected language.
   *
   * @param {string} selectedLanguage - The newly selected language.
   * @param {RTELanguageExtensionState['contentMap']} contentMap - The content map for all languages.
   */
  applyLanguageContent(selectedLanguage, contentMap) {
    if (this.extensionContext && contentMap) {
      let content = contentMap[selectedLanguage];
      const { host, flushValue } = this.extensionContext;
      if (content) {
        content =
          content instanceof VegaRTEContent
            ? content
            : VegaRTEContent.fromJSON(content, host.sourceEditConfig);
      }
      else {
        content = VegaRTEContent.createEmptyContent();
      }
      if (host.value !== content) {
        flushValue(content, true);
      }
    }
  }
  /**
   * Get the RTE latest value. The value is from the code block when in source edit mode; otherwise, it's from the host value.
   *
   * @param {HTMLElement} host - The host element of the rich text editor.
   * @returns {VegaRTEContent} - The content.
   */
  getRTELatestValue(host) {
    var _a;
    let result = host.value;
    if (this.extensionContext && this.extensionContext.isSourceEditMode() && host.shadowRoot) {
      const codeBlock = host.shadowRoot.querySelector('.source-view-container vega-code-block');
      if (codeBlock) {
        let options = undefined;
        if (host.sourceEditConfig) {
          options = {
            autoMatchFormat: (_a = host.sourceEditConfig.autoMatchFormat) !== null && _a !== void 0 ? _a : true,
            filterInlineStyles: host.sourceEditConfig.filterInlineStyles,
          };
        }
        result = VegaRTEContent.fromHtml(codeBlock.value.code, options);
      }
    }
    return result;
  }
}

const languageExtension = /*#__PURE__*/Object.freeze({
  __proto__: null,
  VegaRTELanguageExtension: VegaRTELanguageExtension
});

export { RTELanguageToolbarButtonRenderer as R, VegaRTELanguageExtension as V, languageExtension as l };
