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 _GxIdeStartPage_instances, _GxIdeStartPage_componentLocale, _GxIdeStartPage_userLanguage, _GxIdeStartPage_createKBClickHandler, _GxIdeStartPage_filterKbs, _GxIdeStartPage_openKbClickHandler, _GxIdeStartPage_evaluateContentToRender, _GxIdeStartPage_renderKbsSection, _GxIdeStartPage_renderKbs, _GxIdeStartPage_renderSecondarySection;
// Stencil
import { Host, h } from "@stencil/core";
// Other Libraries
import { getIconPath } from "@genexus/mercury";
import { formatDistanceToNow } from "date-fns";
import { ja, zhCN, enUS } from "date-fns/locale";
// Custom
import { Locale } from "../../common/locale";
// const locale = enUS; // use `zhCN` for Chinese, `ja` for Japanese, `enUS` for English
import { formatDate } from "../../common/helpers";
const LANGS_DATE_FNS_MAP = {
    "en": enUS,
    "ja": ja,
    "zh-CN": zhCN,
    "zh-TW": zhCN,
    "zh-HK": zhCN
};
const DETAIL_ICON = getIconPath({
    category: "system",
    name: "detail",
    colorType: "primary"
});
const FILTER_ICON = getIconPath({
    category: "window-tools",
    name: "filter",
    colorType: "on-surface"
});
const KB_DEFAULT_ICON = getIconPath({
    category: "objects",
    name: "knowledge-base"
});
const SEARCH_ICON = getIconPath({
    category: "system",
    name: "search",
    colorType: "on-surface"
});
const PROJECT_NAME_PLACEHOLDER = "[projectName]";
const CSS_BUNDLES = [
    "resets/box-sizing",
    "utils/typography",
    "utils/layout",
    "components/edit",
    "components/icon",
    "components/button",
    "chameleon/scrollbar",
    "utils/typography"
];
export class GxIdeStartPage {
    constructor() {
        _GxIdeStartPage_instances.add(this);
        /**
         * The component hard-coded strings translations.
         */
        // eslint-disable-next-line @stencil-community/own-props-must-be-private
        _GxIdeStartPage_componentLocale.set(this, void 0);
        _GxIdeStartPage_userLanguage.set(this, void 0);
        _GxIdeStartPage_createKBClickHandler.set(this, (fromServer) => (event) => {
            event.stopPropagation();
            this.createKBCallback(fromServer);
        });
        _GxIdeStartPage_filterKbs.set(this, (event) => {
            this.kbFilterValue = event.detail;
        });
        _GxIdeStartPage_openKbClickHandler.set(this, (kbId) => (event) => {
            event.stopPropagation();
            this.openKbCallback(kbId);
        });
        _GxIdeStartPage_renderKbsSection.set(this, () => {
            const hideKbsFilter = this.kbs.length < this.kbsFilterThreshold;
            const kbsListEmpty = this.filteredKbs.length === 0;
            let contentToRender;
            // Evaluate what is the content to display.
            if (this.filteredKbs.length > 0) {
                contentToRender = __classPrivateFieldGet(this, _GxIdeStartPage_renderKbs, "f").call(this);
            }
            else {
                // No kb has pass the filter. Display an empty-state.
                contentToRender = (h("gx-ide-empty-state", { isAnimated: true, stateIconSrc: FILTER_ICON, stateTitle: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.noMatches }));
            }
            return (h("section", { class: "section-kbs" }, h("header", { class: {
                    "section-kbs__header": true
                } }, h("label", { class: "subtitle-regular-s section-kbs__title", htmlFor: "filter-kbs" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.title), h("ch-edit", {
                // Render always, and display or hide, ro prevent FOUC, and also prevent
                // the header block-size from growing a little bit when the input renders.
                id: "filter-kbs", value: this.kbFilterValue, class: {
                    "input": true,
                    "section-kbs__filter--hidden": hideKbsFilter
                }, startImgSrc: SEARCH_ICON, placeholder: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.filterKbsPlaceholder, onInput: !hideKbsFilter && __classPrivateFieldGet(this, _GxIdeStartPage_filterKbs, "f"), disabled: hideKbsFilter
            })), h("div", { class: {
                    "section-kbs__list": true,
                    "section-kbs__list--empty": kbsListEmpty,
                    "scrollable": true
                } }, this.filteredKbs.length > 0 ? __classPrivateFieldGet(this, _GxIdeStartPage_renderKbs, "f").call(this) : contentToRender)));
        });
        _GxIdeStartPage_renderKbs.set(this, () => {
            var _a;
            return (_a = this.filteredKbs) === null || _a === void 0 ? void 0 : _a.map((kb, index) => {
                // relative time ago
                var _a;
                const relativeDate = kb.lastOpenedDate
                    ? formatDistanceToNow(new Date(kb.lastOpenedDate), {
                        addSuffix: true,
                        locale: __classPrivateFieldGet(this, _GxIdeStartPage_userLanguage, "f")
                    })
                    : undefined;
                // convert date to date format, since toISOString() requires date as Date.
                const dateAsDate = kb.lastOpenedDate
                    ? new Date(kb.lastOpenedDate)
                    : undefined;
                let dateFormated = formatDate(dateAsDate, "date-time-short");
                // icon
                const kbIcon = (_a = kb.icon) !== null && _a !== void 0 ? _a : KB_DEFAULT_ICON;
                return (h("article", { class: "kb__item", key: index }, h("div", { class: "kb__details" }, h("ch-image", { class: "icon-m", src: kbIcon }), h("div", { class: "kb__info" }, h("button", { class: "body-regular-m kb__name", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_openKbClickHandler, "f").call(this, kb.id) }, kb.name), kb.path && h("p", { class: "body-regular-xs kb__path" }, kb.path))), relativeDate && (h("p", { class: "body-regular-s kb__modified" }, `${__classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.opened}`, " ", h("time", { dateTime: dateFormated }, dateFormated)))));
            });
        });
        _GxIdeStartPage_renderSecondarySection.set(this, () => {
            if (!this.secondarySection) {
                return null;
            }
            const multipleCards = this.secondarySection.cards.length > 2;
            return (h("section", {
                // Recent Knowledge Bases
                class: "section-no-kbs"
            }, h("header", null, h("h2", { class: "body-regular-s section-secondary__title" }, this.secondarySection.title)), h("section", { class: {
                    "section-secondary__actions": true,
                    "section-secondary__actions--two-cards": !multipleCards,
                    "section-secondary__actions--multiple-cards": multipleCards,
                    "scrollable": true
                } }, this.secondarySection.cards.map((card, index) => {
                return (h("article", { class: "card card-outlined", key: index }, h("span", { class: "icon-capsule" }, h("ch-image", { class: "icon-l icon-circular", src: card.icon.src, "aria-label": card.icon.ariaLabel })), h("header", { class: "card__header" }, h("h2", { class: "subtitle-semi-bold-xs card__header-title" }, card.title), card.description.map(paragraph => (h("p", { class: "body-regular-s card__header-description" }, paragraph))), card.action && (h("button", { class: "button-tertiary button-icon-and-text button-tertiary-no-padding-inline-start", onClick: card.action.callback && card.action.callback }, h("ch-image", { class: "icon-m", src: DETAIL_ICON }), card.action.caption)))));
            }))));
        });
        this.filteredKbs = undefined;
        this.kbFilterValue = "";
        this.loading = true;
        this.createKBCallback = undefined;
        this.hideOpenExistingProject = false;
        this.kbs = undefined;
        this.kbsFilterThreshold = undefined;
        this.openKbCallback = undefined;
        this.openSampleCallback = undefined;
        this.samples = undefined;
        this.secondarySection = undefined;
    }
    kbFilterValueChanged(newKbFilterValue) {
        this.filteredKbs = this.kbs.filter(kb => kb.name.toLowerCase().includes(newKbFilterValue.toLocaleLowerCase()));
    }
    kbsChanged(newKbs) {
        this.filteredKbs = newKbs;
        this.kbFilterValue = ""; // clear filter
    }
    async componentWillLoad() {
        __classPrivateFieldSet(this, _GxIdeStartPage_componentLocale, await Locale.getComponentStrings(this.el), "f");
        // initialize filteredKbs
        this.kbsChanged(this.kbs);
        // get user language to display the kb "last opened" value in the appropriate language.
        const userLanguage = document.documentElement
            .lang;
        __classPrivateFieldSet(this, _GxIdeStartPage_userLanguage, LANGS_DATE_FNS_MAP[userLanguage], "f");
    }
    render() {
        var _a, _b;
        this.loading =
            (!this.kbs || ((_a = this.kbs) === null || _a === void 0 ? void 0 : _a.length) === 0) && !this.secondarySection;
        const renderViewSamplesCard = ((_b = this.samples) === null || _b === void 0 ? void 0 : _b.length) && this.openSampleCallback;
        return (h(Host, { class: "scrollable" }, h("ch-theme", { model: CSS_BUNDLES }), h("main", { class: "main scrollable" }, h("section", {
            // Create a new Knowledge Base
            class: "section-create-new-kb"
        }, h("header", {
            // main header
            class: "section-create-new-kb__header"
        }, h("h1", { class: "heading-5 section-create-new-kb__title" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.title), h("p", { class: "body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.description)), h("section", { class: "section-create-new-kb__actions scrollable" }, h("article", {
            // create project
            class: "card card-filled"
        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "subtitle-semi-bold-xs card__header-title" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.title), h("p", { class: "body-regular-s" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.description))), h("footer", { class: "card__footer" }, h("button", { class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_createKBClickHandler, "f").call(this, false) }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.buttonCaption))), !this.hideOpenExistingProject ? (h("article", {
            // open existing project
            class: "card-filled"
        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "subtitle-semi-bold-xs" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.title), h("p", { class: "body-regular-s" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.description))), h("footer", { class: "card__footer" }, h("button", { class: "button-secondary cancel-btn", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_createKBClickHandler, "f").call(this, true) }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.buttonCaption)))) : null, renderViewSamplesCard ? (h("article", {
            // view samples
            class: "card-filled"
        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "subtitle-semi-bold-xs" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").viewSamples.title), h("p", { class: "body-regular-s" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").viewSamples.description))), h("footer", { class: "card__footer" }, h("div", { class: "buttons-spacer samples-buttons-container" }, this.samples.map(sample => {
            return (h("button", { class: "button-secondary", onClick: () => this.openSampleCallback(sample.id) }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").viewSamples.open.replace(PROJECT_NAME_PLACEHOLDER, sample.name)));
        }))))) : null)), h("section", { class: "section-secondary scrollable" }, this.loading ? (h("gx-ide-loader", { class: "loader", loaderTitle: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.loaderTitle, description: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.loaderDescription, show: true })) : (__classPrivateFieldGet(this, _GxIdeStartPage_instances, "m", _GxIdeStartPage_evaluateContentToRender).call(this))))));
    }
    static get is() { return "gx-ide-start-page"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["start-page.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["start-page.css"]
        };
    }
    static get assetsDirs() { return ["gx-ide-assets/start-page"]; }
    static get properties() {
        return {
            "createKBCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(fromServer: boolean) => Promise<void>",
                    "resolved": "(fromServer: boolean) => Promise<void>",
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Callback invoked to create a new KB. It must be specified whether this create is create from server or not, through the parameter 'fromServer'."
                }
            },
            "hideOpenExistingProject": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A temporary property to hide the \"Open Existing Project\" card."
                },
                "attribute": "hide-open-existing-project",
                "reflect": false,
                "defaultValue": "false"
            },
            "kbs": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "RecentKBData[]",
                    "resolved": "RecentKBData[]",
                    "references": {
                        "RecentKBData": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/start-page/start-page.tsx",
                            "id": "src/components/start-page/start-page.tsx::RecentKBData"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "User's kbs array"
                }
            },
            "kbsFilterThreshold": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The minimum required of kbs to display a filter."
                },
                "attribute": "kbs-filter-threshold",
                "reflect": false
            },
            "openKbCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(id: string) => Promise<void>",
                    "resolved": "(id: string) => Promise<void>",
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Callback invoked to open a KB when the user clicks on a KB card."
                }
            },
            "openSampleCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(sampleId: string) => Promise<void>",
                    "resolved": "(sampleId: string) => Promise<void>",
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Callback invoked when the user clicks a button to open a sample."
                }
            },
            "samples": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "SampleData[]",
                    "resolved": "SampleData[]",
                    "references": {
                        "SampleData": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/start-page/start-page.tsx",
                            "id": "src/components/start-page/start-page.tsx::SampleData"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "List of samples available to be displayed in the samples card."
                }
            },
            "secondarySection": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "SecondarySection",
                    "resolved": "{ title: string; cards: CardInfo[]; }",
                    "references": {
                        "SecondarySection": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/start-page/start-page.tsx",
                            "id": "src/components/start-page/start-page.tsx::SecondarySection"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The secondary section that will appear below the \"Create a new Knowledge Base\" main section. This section will be displayed if there are no recent kbs."
                }
            }
        };
    }
    static get states() {
        return {
            "filteredKbs": {},
            "kbFilterValue": {},
            "loading": {}
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "kbFilterValue",
                "methodName": "kbFilterValueChanged"
            }, {
                "propName": "kbs",
                "methodName": "kbsChanged"
            }];
    }
}
_GxIdeStartPage_componentLocale = new WeakMap(), _GxIdeStartPage_userLanguage = new WeakMap(), _GxIdeStartPage_createKBClickHandler = new WeakMap(), _GxIdeStartPage_filterKbs = new WeakMap(), _GxIdeStartPage_openKbClickHandler = new WeakMap(), _GxIdeStartPage_renderKbsSection = new WeakMap(), _GxIdeStartPage_renderKbs = new WeakMap(), _GxIdeStartPage_renderSecondarySection = new WeakMap(), _GxIdeStartPage_instances = new WeakSet(), _GxIdeStartPage_evaluateContentToRender = function _GxIdeStartPage_evaluateContentToRender() {
    return this.kbs && this.kbs.length > 0
        ? __classPrivateFieldGet(this, _GxIdeStartPage_renderKbsSection, "f").call(this)
        : __classPrivateFieldGet(this, _GxIdeStartPage_renderSecondarySection, "f").call(this);
};
//# sourceMappingURL=start-page.js.map
