/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { Marked } from 'marked';
import { styles } from './nile-markdown.css';
import NileElement from '../internal/nile-element';
import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';

/**
 * Nile markdown component.
 *
 * @tag nile-markdown
 */

/**
 * @summary Renders markdown content as HTML in the browser using GitHub Flavored Markdown.
 * @status experimental
 *
 * Content can be provided either through the `value` property or through a
 * `<script type="text/markdown">` element placed as a direct child:
 *
 * ```html
 * <nile-markdown>
 *   <script type="text/markdown">
 *     # Hello
 *     This is **markdown**.
 *   </script>
 * </nile-markdown>
 * ```
 *
 * Leading whitespace common to all lines is stripped, so the markdown can be
 * indented to match the surrounding HTML without rendering as a code block.
 *
 * All instances share a single Marked parser. Use `NileMarkdown.getMarked()`
 * to customize it (extensions, renderers, etc.) and `NileMarkdown.updateAll()`
 * to re-render existing instances after changing the configuration.
 *
 * WARNING: The markdown is converted to HTML without sanitization. Do not
 * render unsanitized user input, as this can expose users to XSS attacks.
 *
 * @event nile-markdown-rendered - Emitted after the markdown has been parsed and rendered.
 *
 * @csspart base - The component's base wrapper containing the rendered HTML.
 */

@customElement('nile-markdown')
export class NileMarkdown extends NileElement {
  static styles: CSSResultGroup = styles;

  /** The shared Marked instance used by every nile-markdown on the page. */
  private static marked: Marked | undefined;

  /** All connected instances, used by `updateAll()`. */
  private static instances = new Set<NileMarkdown>();

  /**
   * Returns the shared Marked instance so it can be configured with custom
   * options, extensions, or renderers. Changes affect all instances; call
   * `NileMarkdown.updateAll()` afterwards to re-render existing ones.
   */
  static getMarked(): Marked {
    if (!NileMarkdown.marked) {
      NileMarkdown.marked = new Marked({ gfm: true, async: false });
    }
    return NileMarkdown.marked;
  }

  /** Re-renders every connected nile-markdown instance. */
  static updateAll(): void {
    NileMarkdown.instances.forEach(instance => instance.renderMarkdown());
  }

  /**
   * The markdown to render. Takes precedence over a
   * `<script type="text/markdown">` child when set.
   */
  @property() value = '';

  /** Number of spaces a tab is converted to during whitespace normalization. */
  @property({ type: Number, attribute: 'tab-size' }) tabSize = 4;

  @state() private renderedHtml = '';

  /** Re-renders automatically when the markdown script child changes. */
  private mutationObserver = new MutationObserver(() => this.renderMarkdown());

  connectedCallback(): void {
    super.connectedCallback();
    NileMarkdown.instances.add(this);
    this.mutationObserver.observe(this, {
      childList: true,
      subtree: true,
      characterData: true,
    });
    this.renderMarkdown();
  }

  disconnectedCallback(): void {
    this.mutationObserver.disconnect();
    NileMarkdown.instances.delete(this);
    super.disconnectedCallback();
  }

  protected willUpdate(changed: PropertyValues): void {
    super.willUpdate(changed);
    if (changed.has('value') || changed.has('tabSize')) {
      this.computeHtml();
    }
  }

  protected updated(changed: PropertyValues): void {
    super.updated(changed);
    if (changed.has('renderedHtml')) {
      this.emit('nile-markdown-rendered', undefined, true, true);
    }
  }

  /** Reads the markdown source from `value` or the script child. */
  private getSource(): string {
    if (this.value) return this.value;
    const script = this.querySelector(':scope > script[type="text/markdown"]');
    return script?.textContent ?? '';
  }

  /**
   * Converts tabs to spaces and removes the leading indentation common to all
   * lines, so markdown indented to match the HTML doesn't render as code.
   */
  private normalizeWhitespace(text: string): string {
    const tab = ' '.repeat(Math.max(1, this.tabSize));
    const lines = text.replace(/\t/g, tab).split('\n');

    let minIndent = Infinity;
    for (const line of lines) {
      if (!line.trim()) continue;
      const indent = line.length - line.trimStart().length;
      minIndent = Math.min(minIndent, indent);
    }
    if (!Number.isFinite(minIndent) || minIndent === 0) {
      return text.trim();
    }
    return lines
      .map(line => line.slice(minIndent))
      .join('\n')
      .trim();
  }

  /** Parses the markdown source into `renderedHtml`. */
  private computeHtml(): void {
    const source = this.normalizeWhitespace(this.getSource());
    this.renderedHtml = NileMarkdown.getMarked().parse(source) as string;
  }

  /** Parses the markdown source and renders the resulting HTML. */
  renderMarkdown(): void {
    this.computeHtml();
  }

  render(): TemplateResult {
    return html`
      <div class="markdown" part="base">${unsafeHTML(this.renderedHtml)}</div>
    `;
  }
}

export default NileMarkdown;

declare global {
  interface HTMLElementTagNameMap {
    'nile-markdown': NileMarkdown;
  }
}