import { h } from "@stencil/core";
import { CodeBlockVariation } from "./code-block-variation.enum";
import { CodeBlockLanguage } from "./code-block-language.enum";
import Prism from "prismjs";
import "prismjs/components/prism-typescript";
import "prismjs/components/prism-bash";
import "prismjs/components/prism-scss";
import "prismjs/components/prism-json";
import "prismjs/components/prism-git";
import { ButtonVariation } from "../../../enums";
import { ButtonSize } from "../../../enums";
import { _t } from "../../../text";
/**
 * @enums CodeBlockLanguage - code-block-language.enum.ts
 * @enums CodeBlockVariation - code-block-variation.enum.ts
 * @swedishName Kodblock
 */
export class CodeBlock {
    constructor() {
        this.highlightedCode = undefined;
        this.afCode = undefined;
        this.afVariation = CodeBlockVariation.DARK;
        this.afLanguage = CodeBlockLanguage.HTML;
        this.afLang = 'en';
        this.afHideToolbar = false;
    }
    componentWillLoad() {
        Prism.manual = true;
        this.formatCode();
    }
    formatCode() {
        this.highlightedCode = Prism.highlight(this.afCode, Prism.languages[this.afLanguage], this.afLanguage);
    }
    copyButtonClickHandler() {
        navigator.clipboard.writeText(this.afCode).then(() => {
            // console.log('hurra!');
        }, (err) => {
            // console.log('åh nej!', err);
            console.error(err);
        });
    }
    get cssModifiers() {
        return {
            'digi-code-block--light': this.afVariation === CodeBlockVariation.LIGHT,
            'digi-code-block--dark': this.afVariation === CodeBlockVariation.DARK
        };
    }
    render() {
        return (h("div", { key: '0e303cbfa97ce3236ed4371b4c45936081f0b8b3', class: Object.assign({ 'digi-code-block': true }, this.cssModifiers) }, h("pre", { key: 'b0ed125798e6a05dcfc29af8b35b483492be1e6e', class: `digi-code-block__pre language-${this.afLanguage}` }, h("code", { key: 'fe91928297c3833d7e17cefe283c75a47b0e229b', class: "digi-code-block__code", lang: this.afLang, innerHTML: this.highlightedCode })), !this.afHideToolbar && (h("div", { key: '1bde0cbe8ef10b1eb08cca1e2eac67ea2caf7eb2', class: "digi-code-block__toolbar" }, h("digi-button", { key: '66823907ac7bb38d4b6b23fdd3a875b4fe38ddff', class: "digi-code-block__button", onAfOnClick: () => this.copyButtonClickHandler(), afVariation: ButtonVariation.FUNCTION, afSize: ButtonSize.SMALL }, h("digi-icon-copy", { key: '4329fa1556960690d691b32b59801fbdbd07d390', class: "digi-code-block__icon", "aria-hidden": "true", slot: "icon" }), _t.code.copy)))));
    }
    static get is() { return "digi-code-block"; }
    static get originalStyleUrls() {
        return {
            "$": ["code-block.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["code-block.css"]
        };
    }
    static get properties() {
        return {
            "afCode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "A string of code to use in the code block."
                        }],
                    "text": "En str\u00E4ng med den kod som du vill visa upp."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-code",
                "reflect": false
            },
            "afVariation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "CodeBlockVariation",
                    "resolved": "CodeBlockVariation.DARK | CodeBlockVariation.LIGHT",
                    "references": {
                        "CodeBlockVariation": {
                            "location": "import",
                            "path": "./code-block-variation.enum",
                            "id": "src/components/_code/code-block/code-block-variation.enum.ts::CodeBlockVariation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set code block variation. This defines the syntax highlighting and can be either light or dark."
                        }],
                    "text": "S\u00E4tt f\u00E4rgtemat. Kan vara ljust eller m\u00F6rkt."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-variation",
                "reflect": false,
                "defaultValue": "CodeBlockVariation.DARK"
            },
            "afLanguage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "CodeBlockLanguage",
                    "resolved": "CodeBlockLanguage.BASH | CodeBlockLanguage.CSS | CodeBlockLanguage.GIT | CodeBlockLanguage.HTML | CodeBlockLanguage.JAVASCRIPT | CodeBlockLanguage.JSON | CodeBlockLanguage.JSX | CodeBlockLanguage.SCSS | CodeBlockLanguage.TSX | CodeBlockLanguage.TYPESCRIPT",
                    "references": {
                        "CodeBlockLanguage": {
                            "location": "import",
                            "path": "./code-block-language.enum",
                            "id": "src/components/_code/code-block/code-block-language.enum.ts::CodeBlockLanguage"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set code language. Defaults to html."
                        }],
                    "text": "S\u00E4tt programmeringsspr\u00E5k. 'html' \u00E4r f\u00F6rvalt."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-language",
                "reflect": false,
                "defaultValue": "CodeBlockLanguage.HTML"
            },
            "afLang": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set language inside of code element. Defaults to 'en' (english)."
                        }],
                    "text": "S\u00E4tt spr\u00E5k inuti code-elementet. 'en' (engelska) \u00E4r f\u00F6rvalt."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-lang",
                "reflect": false,
                "defaultValue": "'en'"
            },
            "afHideToolbar": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Remove toolbar for copying code etc"
                        }],
                    "text": "Ta bort knappar f\u00F6r att till exempel kopiera kod"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-hide-toolbar",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "highlightedCode": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "afCode",
                "methodName": "formatCode"
            }];
    }
}
