import { h, Host } from "@stencil/core";
import { markdownToHTML } from "./markdown-parser";
import { globalConfig } from "../../global/config";
import { ImageIntersectionObserver } from "./image-intersection-observer";
/**
 * The Markdown component receives markdown syntax
 * and renders it as HTML.
 *
 * @exampleComponent limel-example-markdown-headings
 * @exampleComponent limel-example-markdown-emphasis
 * @exampleComponent limel-example-markdown-lists
 * @exampleComponent limel-example-markdown-links
 * @exampleComponent limel-example-markdown-images
 * @exampleComponent limel-example-markdown-code
 * @exampleComponent limel-example-markdown-footnotes
 * @exampleComponent limel-example-markdown-tables
 * @exampleComponent limel-example-markdown-html
 * @exampleComponent limel-example-markdown-keys
 * @exampleComponent limel-example-markdown-blockquotes
 * @exampleComponent limel-example-markdown-horizontal-rule
 * @exampleComponent limel-example-markdown-custom-component
 * @exampleComponent limel-example-markdown-remove-empty-paragraphs
 * @exampleComponent limel-example-markdown-composite
 */
export class Markdown {
    constructor() {
        /**
         * The input text. Treated as GitHub Flavored Markdown, with the addition
         * that any included HTML will be parsed and rendered as HTML, rather than
         * as text.
         */
        this.value = '';
        /**
         * Whitelisted html elements.
         *
         * Any custom element added here will not be sanitized and thus rendered.
         * Can also be set via `limel-config`. Setting this property will override
         * the global config.
         * @alpha
         */
        this.whitelist = globalConfig.markdownWhitelist;
        /**
         * Enable lazy loading for images
         */
        this.lazyLoadImages = false;
        /**
         * Set to `false` to preserve empty paragraphs before rendering.
         * Empty paragraphs are paragraphs that do not contain
         * any meaningful content (text, images, etc.), or only contain
         * whitespace (`<br />` or `&nbsp;`).
         */
        this.removeEmptyParagraphs = true;
        this.imageIntersectionObserver = null;
    }
    async textChanged() {
        var _a;
        try {
            this.cleanupImageIntersectionObserver();
            const html = await markdownToHTML(this.value, {
                forceHardLineBreaks: true,
                whitelist: (_a = this.whitelist) !== null && _a !== void 0 ? _a : [],
                lazyLoadImages: this.lazyLoadImages,
                removeEmptyParagraphs: this.removeEmptyParagraphs,
            });
            this.rootElement.innerHTML = html;
            this.setupImageIntersectionObserver();
        }
        catch (error) {
            console.error(error);
        }
    }
    handleRemoveEmptyParagraphsChange() {
        return this.textChanged();
    }
    async componentDidLoad() {
        this.textChanged();
    }
    disconnectedCallback() {
        this.cleanupImageIntersectionObserver();
    }
    render() {
        return (h(Host, { key: 'b1939b572c0a9ac59178497f56ebc469bc707d98' }, h("div", { key: 'f9dd27e5263281fad9e6d1da9d25d3ccd3a9990e', id: "markdown", ref: (el) => (this.rootElement = el) })));
    }
    setupImageIntersectionObserver() {
        if (this.lazyLoadImages) {
            this.imageIntersectionObserver = new ImageIntersectionObserver(this.rootElement);
        }
    }
    cleanupImageIntersectionObserver() {
        if (this.imageIntersectionObserver) {
            this.imageIntersectionObserver.disconnect();
            this.imageIntersectionObserver = null;
        }
    }
    static get is() { return "limel-markdown"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["markdown.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["markdown.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The input text. Treated as GitHub Flavored Markdown, with the addition\nthat any included HTML will be parsed and rendered as HTML, rather than\nas text."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value",
                "defaultValue": "''"
            },
            "whitelist": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "CustomElementDefinition[]",
                    "resolved": "CustomElementDefinition[]",
                    "references": {
                        "CustomElementDefinition": {
                            "location": "import",
                            "path": "../../global/shared-types/custom-element.types",
                            "id": "src/global/shared-types/custom-element.types.ts::CustomElementDefinition",
                            "referenceLocation": "CustomElementDefinition"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "alpha",
                            "text": undefined
                        }],
                    "text": "Whitelisted html elements.\n\nAny custom element added here will not be sanitized and thus rendered.\nCan also be set via `limel-config`. Setting this property will override\nthe global config."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "globalConfig.markdownWhitelist"
            },
            "lazyLoadImages": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Enable lazy loading for images"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "lazy-load-images",
                "defaultValue": "false"
            },
            "removeEmptyParagraphs": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `false` to preserve empty paragraphs before rendering.\nEmpty paragraphs are paragraphs that do not contain\nany meaningful content (text, images, etc.), or only contain\nwhitespace (`<br />` or `&nbsp;`)."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "remove-empty-paragraphs",
                "defaultValue": "true"
            }
        };
    }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "textChanged"
            }, {
                "propName": "removeEmptyParagraphs",
                "methodName": "handleRemoveEmptyParagraphsChange"
            }];
    }
}
