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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
import changeManager from '../../../../helpers/change-manager/change-manager';
import { VegaInternalCodeBlockBlur } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
/**
 * The code block content renderer class.
 */
export class VegaCodeBlockContentRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    /**
     * The code input area focus.
     */
    this.handleFocus = () => {
      if (!this.readOnly && !this.disabled) {
        this.host.classList.add('focus');
      }
    };
    /**
     * The code input area blur.
     */
    this.handleBlur = () => {
      this.host.classList.remove('focus');
      changeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalCodeBlockBlur), null);
    };
  }
  /**
   * Get the editable root element.
   *
   * @returns {HTMLElement} - The root element.
   */
  getCodeContentContainerRef() {
    return this.codeContentContainerRef;
  }
  /**
   * Add focus and blur event listener.
   */
  registerEventListener() {
    if (this.codeContentContainerRef) {
      this.codeContentContainerRef.addEventListener('focusin', this.handleFocus);
      this.codeContentContainerRef.addEventListener('focusout', this.handleBlur);
    }
  }
  /**
   * Remove the event listener.
   */
  unregisterEventListener() {
    if (this.codeContentContainerRef) {
      this.codeContentContainerRef.removeEventListener('focusin', this.handleFocus);
      this.codeContentContainerRef.removeEventListener('focusout', this.handleBlur);
    }
  }
  /**
   * Render the code content.
   *
   * @returns {HTMLElement} - The code element.
   */
  render() {
    var _a;
    const codeNodes = this.contentParseController.parseCode();
    const language = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.language) || '';
    return (h(Fragment, null,
      h("style", null, this.getLineNumberStyleVariable(codeNodes)),
      h("code", { role: "textbox", tabIndex: 0, spellcheck: false, ref: (node) => (this.codeContentContainerRef = node), contenteditable: this.readOnly || this.disabled ? false : true, "data-language": language, innerHTML: codeNodes
          .map((codeNode) => this.renderCodeNode(codeNode))
          .join('') })));
  }
  /**
   * Render the code node the html element.
   *
   * @param {CodeNodeType} codeNode - The code node object.
   * @returns {string} - The html element.
   */
  renderCodeNode(codeNode) {
    const { key, className, mark, text } = codeNode;
    return `<span key='${key}' class='${className}' data-mark='${mark}' data-index='${key}'>${text}</span>`;
  }
  /**
   * Dynamic calculate line number element width and update the margin and padding variable.
   *
   * @param {CodeNodeType[]} codeNodes - The code node array.
   * @returns {string} - The style content.
   */
  getLineNumberStyleVariable(codeNodes) {
    const lineCountArray = codeNodes.filter((item) => {
      return item.text === '\n';
    });
    const singleTextLength = 10;
    const gap = 16;
    const space = (lineCountArray.length + 1).toString().length * singleTextLength;
    return `code{--v-code-line-number-width:${space}px;--v-code-line-number-ml:-${space + gap}px;--v-code-block-pl:${space + gap}px}`;
  }
}
__decorate([
  MapToComponentField()
], VegaCodeBlockContentRenderer.prototype, "host", void 0);
__decorate([
  MapToComponentField()
], VegaCodeBlockContentRenderer.prototype, "readOnly", void 0);
__decorate([
  MapToComponentField()
], VegaCodeBlockContentRenderer.prototype, "disabled", void 0);
__decorate([
  MapToComponentField()
], VegaCodeBlockContentRenderer.prototype, "value", void 0);
__decorate([
  MapToComponentField()
], VegaCodeBlockContentRenderer.prototype, "contentParseController", void 0);
__decorate([
  MapToComponentMethod('componentDidLoad')
], VegaCodeBlockContentRenderer.prototype, "registerEventListener", null);
__decorate([
  MapToComponentMethod('disconnectedCallback')
], VegaCodeBlockContentRenderer.prototype, "unregisterEventListener", null);
