var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m")
        throw new TypeError("Private method is not writable");
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _GxIdePluginDetails_componentLocale, _GxIdePluginDetails_chMarkdownViewer, _GxIdePluginDetails_docSectionIdDescriptionMap, _GxIdePluginDetails_versionsMenuOptionsModel, _GxIdePluginDetails_menuVersionSelectedHandler, _GxIdePluginDetails_renderUninstallButton, _GxIdePluginDetails_installClickedHandler, _GxIdePluginDetails_updateVersionHandler, _GxIdePluginDetails_openLinkHandler, _GxIdePluginDetails_uninstallClickedHandler, _GxIdePluginDetails_renderActionButtons, _GxIdePluginDetails_tabSelectionChangedHandler, _GxIdePluginDetails_renderDocSectionsSlots, _GxIdePluginDetails_returnFormatedId, _GxIdePluginDetails_renderLinkTag, _GxIdePluginDetails_renderAsideContent;
import { Host, h, getAssetPath } from "@stencil/core";
import { getIconPath } from "@genexus/mercury";
import { Locale } from "../../common/locale";
const USER_ICON = getIconPath({
    category: "system",
    name: "user",
    colorType: "on-surface"
});
const CHEVRON_DOWN_ICON = getIconPath({
    category: "system",
    name: "chevron-down",
    colorType: "on-primary"
});
const CHECK_CIRCLE_ICON = getIconPath({
    category: "system",
    name: "check-circle",
    colorType: "success"
});
// plugin icon if no iconUri was provided
const EXTENSION_ICON_IMG = getAssetPath(`./gx-ide-assets/plugin-manager/images/plugin-icon.svg`);
const CSS_BUNDLES = [
    "resets/box-sizing",
    "chameleon/scrollbar",
    "components/button",
    "components/dropdown",
    "components/edit",
    "components/icon",
    "components/list-box",
    "components/tab",
    "utils/form",
    "utils/layout",
    "utils/spacing",
    "utils/typography"
];
export class GxIdePluginDetails {
    constructor() {
        /**
         * The component hard-coded strings translations.
         */
        // eslint-disable-next-line @stencil-community/own-props-must-be-private
        _GxIdePluginDetails_componentLocale.set(this, void 0);
        _GxIdePluginDetails_chMarkdownViewer.set(this, void 0);
        // A map between docSection "id", and docSection "description".
        // "id" is generated inside this component.
        _GxIdePluginDetails_docSectionIdDescriptionMap.set(this, new Map());
        _GxIdePluginDetails_versionsMenuOptionsModel.set(this, () => {
            var _a;
            const versionsToUpdateMenusModel = (_a = this.data.versions) === null || _a === void 0 ? void 0 : _a.map(version => {
                return { id: version, caption: version };
            });
            return versionsToUpdateMenusModel;
        });
        _GxIdePluginDetails_menuVersionSelectedHandler.set(this, (event) => {
            const selectedVersion = event.detail.id;
            this.installCallback(selectedVersion);
        });
        _GxIdePluginDetails_renderUninstallButton.set(this, () => {
            return (h("button", { class: "button-tertiary", onClick: __classPrivateFieldGet(this, _GxIdePluginDetails_uninstallClickedHandler, "f") }, __classPrivateFieldGet(this, _GxIdePluginDetails_componentLocale, "f").actions.uninstall));
        });
        _GxIdePluginDetails_installClickedHandler.set(this, () => {
            this.installCallback();
        });
        _GxIdePluginDetails_updateVersionHandler.set(this, (id) => () => {
            this.installCallback(id);
        });
        _GxIdePluginDetails_openLinkHandler.set(this, (link) => (event) => {
            if (this.openLinkCallback) {
                event.preventDefault();
                this.openLinkCallback(link);
            }
        });
        _GxIdePluginDetails_uninstallClickedHandler.set(this, () => {
            this.uninstallCallback();
        });
        _GxIdePluginDetails_renderActionButtons.set(this, () => {
            var _a;
            let actionButtonCaption;
            let actionButtonClasses = "button-primary action-button";
            let actionButtonCallback;
            const moreVersionsToUpdate = (_a = this.data.versions) === null || _a === void 0 ? void 0 : _a.length;
            if (!this.data.installed) {
                actionButtonCaption = __classPrivateFieldGet(this, _GxIdePluginDetails_componentLocale, "f").actions.install;
                actionButtonCallback = __classPrivateFieldGet(this, _GxIdePluginDetails_installClickedHandler, "f");
            }
            else if (this.data.updateVersion) {
                actionButtonCaption = `${__classPrivateFieldGet(this, _GxIdePluginDetails_componentLocale, "f").actions.updateTo} ${this.data.updateVersion}`;
                actionButtonCallback = __classPrivateFieldGet(this, _GxIdePluginDetails_updateVersionHandler, "f").call(this, this.data.updateVersion);
            }
            else {
                actionButtonCaption = __classPrivateFieldGet(this, _GxIdePluginDetails_componentLocale, "f").actions.installed;
            }
            if (moreVersionsToUpdate) {
                actionButtonClasses = `${actionButtonClasses} more-versions-available`;
            }
            return [
                h("div", { class: "version-buttons-container" }, h("button", { class: actionButtonClasses, onClick: actionButtonCallback }, actionButtonCaption), moreVersionsToUpdate ? (h("ch-action-menu-render", { class: "dropdown button-primary button-icon-only", blockAlign: "outside-end", inlineAlign: "inside-start", model: __classPrivateFieldGet(this, _GxIdePluginDetails_versionsMenuOptionsModel, "f").call(this), onButtonClick: __classPrivateFieldGet(this, _GxIdePluginDetails_menuVersionSelectedHandler, "f") }, h("ch-image", { src: CHEVRON_DOWN_ICON, class: "icon-m" }))) : null)
            ];
        });
        _GxIdePluginDetails_tabSelectionChangedHandler.set(this, (event) => {
            this.selectedTabId = event.detail.newSelectedId;
        });
        _GxIdePluginDetails_renderDocSectionsSlots.set(this, () => {
            return this.docsTabModel.map(docSectionTab => {
                if (docSectionTab.id === this.selectedTabId) {
                    const markdownValue = __classPrivateFieldGet(this, _GxIdePluginDetails_docSectionIdDescriptionMap, "f").get(docSectionTab.id);
                    return (h("ch-markdown-viewer", { ref: (el) => (__classPrivateFieldSet(this, _GxIdePluginDetails_chMarkdownViewer, el, "f")), slot: docSectionTab.id, key: docSectionTab.id, class: "markdown spacing-body scrollable", theme: "components/markdown-viewer", value: markdownValue }));
                }
            });
        });
        _GxIdePluginDetails_returnFormatedId.set(this, (rawId) => {
            return rawId.toLowerCase().replace(/\s+/g, "-");
        });
        _GxIdePluginDetails_renderLinkTag.set(this, (href, label, cssClass, chImageSrc) => {
            return (h("a", { href: href, target: "_blank", onClick: __classPrivateFieldGet(this, _GxIdePluginDetails_openLinkHandler, "f").call(this, href), class: cssClass }, chImageSrc && h("ch-image", { src: chImageSrc, class: "icon-m" }), label));
        });
        _GxIdePluginDetails_renderAsideContent.set(this, () => {
            return this.data.infoCategories.map(infoCategory => {
                return (h("div", { class: "plugin__info-category" }, h("h3", { class: "subtitle-semi-bold-s" }, infoCategory.name), h("ul", { class: {
                        "fields__list": true,
                        "fields__list--as-tags": infoCategory.displayAsTags
                    } }, infoCategory.fields.map(field => {
                    // If the field name isn’t specified, only the value is shown — usually a link.
                    const fieldValue = typeof field.value === "string"
                        ? field.value
                        : __classPrivateFieldGet(this, _GxIdePluginDetails_renderLinkTag, "f").call(this, field.value.url, field.value.text, "field__link");
                    return (h("li", { class: "field__li" }, field.name && !infoCategory.displayAsTags
                        ? // displaysAsTags forces the items to be displayed as tags
                            // no span.field__name and span.field__value
                            [
                                h("span", { class: "field__name body-semi-bold-s" }, field.name),
                                h("span", { class: "field__value body-regular-s" }, fieldValue)
                            ]
                        : fieldValue));
                }))));
            });
        });
        this.docsTabModel = [];
        this.selectedTabId = undefined;
        this.data = undefined;
        this.installCallback = undefined;
        this.openLinkCallback = undefined;
        this.uninstallCallback = undefined;
    }
    async componentWillLoad() {
        var _a;
        __classPrivateFieldSet(this, _GxIdePluginDetails_componentLocale, await Locale.getComponentStrings(this.el), "f");
        if ((_a = this.data.docSections) === null || _a === void 0 ? void 0 : _a.length) {
            this.docsTabModel = this.data.docSections.map((docSection, i) => {
                const formatedId = __classPrivateFieldGet(this, _GxIdePluginDetails_returnFormatedId, "f").call(this, docSection.name);
                __classPrivateFieldGet(this, _GxIdePluginDetails_docSectionIdDescriptionMap, "f").set(formatedId, docSection.content);
                if (i === 0) {
                    this.selectedTabId = formatedId;
                }
                return {
                    id: formatedId,
                    name: docSection.name
                };
            });
        }
    }
    componentDidLoad() {
        __classPrivateFieldGet(this, _GxIdePluginDetails_chMarkdownViewer, "f").addEventListener("click", event => {
            // Listens for clicks on links inside <ch-markdown-viewer>.
            // If a link (<a>) is clicked and openLinkCallback is defined,
            // it prevents the default navigation and delegates the event
            // to this.#openLinkHandler, passing the link's href.
            const path = event.composedPath();
            const link = path.find(el => el instanceof HTMLAnchorElement);
            if (link === null || link === void 0 ? void 0 : link.href) {
                __classPrivateFieldGet(this, _GxIdePluginDetails_openLinkHandler, "f").call(this, link.href)(event);
            }
        });
    }
    render() {
        const renderActionButtons = !this.data.installed ||
            (this.data.installed && !!this.data.updateVersion);
        const titleLinkDataText = this.data.name.text;
        const titleLinkDataUrl = this.data.name.url;
        const titleHasLink = titleLinkDataText && titleLinkDataUrl;
        const titleText = titleLinkDataText || this.data.name;
        const publisherDataText = this.data.publisher.text;
        const publisherDataUrl = this.data.publisher.url;
        const publisherHasLink = publisherDataText && publisherDataUrl;
        const publisherText = publisherDataText || this.data.publisher;
        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, h("header", { class: "header" }, h("img", { class: "plugin__icon", src: this.data.iconUrl || EXTENSION_ICON_IMG, alt: "plugin extension icon" }), h("div", { class: "plugin__details" }, titleHasLink ? (h("h2", { class: "heading-5 has-link" }, __classPrivateFieldGet(this, _GxIdePluginDetails_renderLinkTag, "f").call(this, titleLinkDataUrl, titleText, "text-underline"))) : (h("h2", { class: "heading-5" }, titleText)), publisherHasLink ? (__classPrivateFieldGet(this, _GxIdePluginDetails_renderLinkTag, "f").call(this, publisherDataUrl, titleText, "text-underline plugin__publisher caption-semi-bold-l", USER_ICON)) : (h("p", { class: "plugin__publisher caption-semi-bold-l" }, h("ch-image", { src: USER_ICON, class: "icon-s" }), publisherText)), h("p", { class: "plugin__description" }, this.data.description), h("div", { class: "buttons-spacer plugin__actions-container" }, renderActionButtons ? (__classPrivateFieldGet(this, _GxIdePluginDetails_renderActionButtons, "f").call(this)) : (
        // installed and no updates
        h("p", { class: "installed-container subtitle-semi-bold-s" }, h("ch-image", { src: CHECK_CIRCLE_ICON, class: "icon-s" }), __classPrivateFieldGet(this, _GxIdePluginDetails_componentLocale, "f").actions.installed)), this.data.installed && __classPrivateFieldGet(this, _GxIdePluginDetails_renderUninstallButton, "f").call(this)))), h("div", { class: "main" }, this.docsTabModel.length > 0 && (h("ch-tab-render", { class: "tab docsTab scrollable", tabListPosition: "block-start", overflow: "auto", contain: "size", model: this.docsTabModel, onSelectedItemChange: __classPrivateFieldGet(this, _GxIdePluginDetails_tabSelectionChangedHandler, "f"), selectedId: this.selectedTabId }, __classPrivateFieldGet(this, _GxIdePluginDetails_renderDocSectionsSlots, "f").call(this)))), h("div", { class: "aside spacing-body scrollable" }, __classPrivateFieldGet(this, _GxIdePluginDetails_renderAsideContent, "f").call(this)))));
    }
    static get is() { return "gx-ide-plugin-details"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["plugin-details.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["plugin-details.css"]
        };
    }
    static get assetsDirs() { return ["gx-ide-assets/plugin-details"]; }
    static get properties() {
        return {
            "data": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "PluginDetailsData",
                    "resolved": "{ id: string; name: string | LinkData; publisher: string | LinkData; installed: boolean; updateVersion?: string; versions: string[]; iconUrl: string; description: string; docSections: DocSectionData[]; infoCategories: PluginInfoCategoryData[]; }",
                    "references": {
                        "PluginDetailsData": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/plugin-details/plugin-details.tsx",
                            "id": "src/components/plugin-details/plugin-details.tsx::PluginDetailsData"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifies all the information related to a plugin."
                }
            },
            "installCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(version?: string) => Promise<void>",
                    "resolved": "(version?: string) => Promise<void>",
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Callback that should be invoked when the user performs the install or update action.\nReceives an optional version string when a specific version is selected."
                }
            },
            "openLinkCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(url: string) => Promise<void>",
                    "resolved": "(url: string) => Promise<void>",
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Callback that should be invoked when the user attempts to open any link displayed in this component."
                }
            },
            "uninstallCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "() => Promise<void>",
                    "resolved": "() => Promise<void>",
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Callback that should be invoked when the user performs the uninstall action."
                }
            }
        };
    }
    static get states() {
        return {
            "docsTabModel": {},
            "selectedTabId": {}
        };
    }
    static get elementRef() { return "el"; }
}
_GxIdePluginDetails_componentLocale = new WeakMap(), _GxIdePluginDetails_chMarkdownViewer = new WeakMap(), _GxIdePluginDetails_docSectionIdDescriptionMap = new WeakMap(), _GxIdePluginDetails_versionsMenuOptionsModel = new WeakMap(), _GxIdePluginDetails_menuVersionSelectedHandler = new WeakMap(), _GxIdePluginDetails_renderUninstallButton = new WeakMap(), _GxIdePluginDetails_installClickedHandler = new WeakMap(), _GxIdePluginDetails_updateVersionHandler = new WeakMap(), _GxIdePluginDetails_openLinkHandler = new WeakMap(), _GxIdePluginDetails_uninstallClickedHandler = new WeakMap(), _GxIdePluginDetails_renderActionButtons = new WeakMap(), _GxIdePluginDetails_tabSelectionChangedHandler = new WeakMap(), _GxIdePluginDetails_renderDocSectionsSlots = new WeakMap(), _GxIdePluginDetails_returnFormatedId = new WeakMap(), _GxIdePluginDetails_renderLinkTag = new WeakMap(), _GxIdePluginDetails_renderAsideContent = new WeakMap();
//# sourceMappingURL=plugin-details.js.map
