import 'prismjs';
import 'prismjs/components/prism-jsx.min';
import 'prismjs/components/prism-tsx.min';
import 'prismjs/components/prism-typescript.min';
import { h } from "@stencil/core";
// Set Prism to manual mode
window.Prism.manual = true;
export class Code {
    constructor() {
        this.language = 'none';
        this.value = '';
    }
    highlight() {
        const query = this.inline ? 'code' : 'pre';
        const el = this.el.shadowRoot.querySelector(query);
        if (el)
            window.Prism.highlightAllUnder(el, !!this.async);
    }
    componentDidLoad() {
        this.highlight();
    }
    componentDidUpdate() {
        this.highlight();
    }
    renderCode(classes, content) {
        return (h("code", { class: classes, key: content }, content));
    }
    renderPre(classes, content) {
        return (h("pre", { class: classes, key: content }, this.renderCode(classes, content)));
    }
    render() {
        const classes = `language-${this.language}`;
        const content = Array.isArray(this.value)
            ? this.value.join('\n')
            : this.value;
        return this.inline
            ? this.renderCode(classes, content)
            : this.renderPre(classes, content);
    }
    static get is() { return "bce-code"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-code.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-code.css"]
    }; }
    static get properties() { return {
        "async": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "async",
            "reflect": true
        },
        "inline": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "inline",
            "reflect": true
        },
        "language": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "BceCodeLanguage",
                "resolved": "\"clike\" | \"css\" | \"html\" | \"javascript\" | \"js\" | \"jsx\" | \"mathml\" | \"none\" | \"svg\" | \"ts\" | \"tsx\" | \"typescript\" | \"xml\"",
                "references": {
                    "BceCodeLanguage": {
                        "location": "local"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "language",
            "reflect": true,
            "defaultValue": "'none'"
        },
        "value": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string | string[]",
                "resolved": "string | string[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": false,
            "defaultValue": "''"
        }
    }; }
    static get elementRef() { return "el"; }
}
