import { h } from "@stencil/core";
export class CodeSnippet {
    constructor() {
        var _a;
        this.snippets = {};
        this.showButton = false;
        this.type = 'multi-line';
        this.showSidebar = false;
        this.showTabList = false;
        this.showMore = false;
        this.activeTab = ((_a = Object.keys(this.snippets || {})) === null || _a === void 0 ? void 0 : _a[0]) || '';
    }
    componentDidLoad() {
        var _a;
        this.activeTab = ((_a = Object.keys(this.snippets || {})) === null || _a === void 0 ? void 0 : _a[0]) || '';
    }
    handleTabClick(tab) {
        this.activeTab = tab;
        this.showMore = false;
    }
    handleCopy() {
        navigator.clipboard.writeText(this.snippets[this.activeTab]);
    }
    renderWithLineNumbers(code) {
        var _a;
        const isMultiLine = this.type === 'multi-line';
        if (isMultiLine) {
            return (_a = code === null || code === void 0 ? void 0 : code.split('\n')) === null || _a === void 0 ? void 0 : _a.map((line, index) => (h("div", { key: index, class: "code-snippet-code-line" }, this.showSidebar && (h("div", { class: "code-snippet-number_container" }, h("span", { class: "code-snippet-line-number" }, index + 1))), h("span", { class: "code-snippet-line-content" }, line))));
        }
        else {
            return code
                .split('\n')
                .slice(0, 1)
                .map((line, index) => (h("div", { key: index, class: "code-snippet-code-line" }, h("span", { class: "code-snippet-line-content green" }, line))));
        }
    }
    render() {
        return (h("div", { key: '026338f65ac11d999e254de81b4d9b04a74ba2e4', class: "code-snippet-container" }, this.showTabList && (h("div", { key: '10f292e87ffc3af0efd64516e108ab9258eb7854', class: "code-snippet-tabs" }, h("dga-tabs", { key: '13bebb652b93f5566453592e2b15b486a2730bfd', divider: true, orientation: "horizontal", size: "lg", tabsList: Object.keys(this.snippets).map((tab) => ({
                label: tab,
                onClick: () => this.handleTabClick(tab)
            })) }))), h("pre", { key: '3062cba4633c716296cebd990e3d59a85eeb3046', class: "code-snippet-code-display" }, h("dga-button", { key: '6e3ad3ec1b811ac9285dba16e11f5580850ca981', size: "lg", iconOnly: true, iconType: "copy-01", variant: "subtle", iconProps: { size: 24, color: "#161616", variant: "stroke" }, class: `code-snippet-icon ${this.type}`, onClick: () => this.handleCopy(), onColor: false }), h("code", { key: 'cd89e46806eee5ec08f1424802a621fef2d47eaa', style: {
                height: this.showButton && this.type === 'multi-line' && !this.showMore ? '150px' : 'auto',
            } }, this.renderWithLineNumbers(this.snippets[this.activeTab])), this.showButton && this.type === 'multi-line' && (h("div", { key: 'dd1370b7ee0c14657c53c68f597bbbe1635d3c16', class: "code-snippet-wrapper" }, h("dga-button", { key: '92ba98280cb0f039461e8b5a28f404bebe1fd67a', label: this.showMore ? 'Show Less' : 'Show More', size: "md", trailIcon: true, trailIconType: !this.showMore ? "arrow-down-01" : "arrow-up-01", variant: "subtle", trailIconProps: { size: 20, color: "#161616", variant: "stroke" }, onClick: () => (this.showMore = !this.showMore), onColor: false }))))));
    }
    static get is() { return "dga-codesnippet"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "snippets": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "{ [key: string]: string }",
                    "resolved": "{ [key: string]: string; }",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{}"
            },
            "showButton": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-button",
                "reflect": false,
                "defaultValue": "false"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'multi-line' | 'single'",
                    "resolved": "\"multi-line\" | \"single\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "type",
                "reflect": false,
                "defaultValue": "'multi-line'"
            },
            "showSidebar": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-sidebar",
                "reflect": false,
                "defaultValue": "false"
            },
            "showTabList": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-tab-list",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "showMore": {},
            "activeTab": {}
        };
    }
}
//# sourceMappingURL=dga-codeSnippet.js.map
