import { LitElement, html, css, TemplateResult, CSSResultArray } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { styles as editorStyles } from '../nile-wysiwyg-editor.css';

/**
 * Renders sanitized document HTML inside its OWN shadow root. Any author
 * `<style>` block in the content is therefore scoped to this element and
 * cannot leak into the surrounding source-view / editor chrome (which lives in
 * a different shadow root). Reuses the editor's content styles so the render
 * matches the live editor. The content wrapper is an `<article>`, not a
 * `<div>`, so a blanket `div { … }` rule doesn't paint the wrapper itself.
 */
@customElement('nile-wysiwyg-preview')
export class NileWysiwygPreview extends LitElement {
  /** Sanitized HTML to render (already run through sanitizeHtml). */
  @property({ type: String }) content = '';

  public static get styles(): CSSResultArray {
    return [
      editorStyles,
      css`
        :host {
          display: block;
        }
        .ProseMirror {
          min-height: 0;
        }
      `,
    ];
  }

  public render(): TemplateResult {
    return html`<article class="ProseMirror">${unsafeHTML(this.content)}</article>`;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'nile-wysiwyg-preview': NileWysiwygPreview;
  }
}