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 _GxIdeChatWelcome_componentLocale, _GxIdeChatWelcome_animationEntrance, _GxIdeChatWelcome_sendPromptToChat, _GxIdeChatWelcome_animationExit;
/* eslint-disable @stencil-community/strict-mutable */
import { Host, h, getAssetPath } from "@stencil/core";
import { getIconPath } from "@genexus/mercury";
import { Locale } from "../../../common/locale";
const HEADER_ILLUSTRATION = getAssetPath(`./gx-ide-assets/chat-welcome/images/header-illustration.svg`);
const AI_AVATAR = getAssetPath(`./gx-ide-assets/chat-welcome/images/ai-avatar-welcome.svg`);
const HEADER_TRANSITION_DELAY = 100;
const HEADER_TRANSITION_DURATION = 500;
const SUGGESTED_PROMPT_BUTTON_INTERVAL = 200;
const SUGGESTED_PROMPT_BUTTONS_DELAY = 500;
const WELCOME_EXIT_DURATION = 100;
const AI_ICON = getIconPath({
    category: "system",
    name: "assistant",
    colorType: "primary"
});
const ARROW_RIGHT_ICON = getIconPath({
    category: "system",
    name: "arrow-right",
    colorType: "primary"
});
const CSS_BUNDLES = [
    "resets/box-sizing",
    "components/icon",
    "utils/typography"
];
export class GxIdeChatWelcome {
    constructor() {
        // eslint-disable-next-line @stencil-community/own-props-must-be-private
        _GxIdeChatWelcome_componentLocale.set(this, void 0);
        _GxIdeChatWelcome_animationEntrance.set(this, () => {
            setTimeout(() => {
                this.showHeader = true;
                setTimeout(() => {
                    this.showSuggestedPrompts = true;
                }, SUGGESTED_PROMPT_BUTTONS_DELAY);
            }, HEADER_TRANSITION_DELAY + HEADER_TRANSITION_DURATION);
        });
        _GxIdeChatWelcome_sendPromptToChat.set(this, async (e) => {
            const prompt = e.currentTarget.dataset["prommpt"];
            await __classPrivateFieldGet(this, _GxIdeChatWelcome_animationExit, "f").call(this);
            this.suggestedPrompRequestedCallback(prompt);
        });
        _GxIdeChatWelcome_animationExit.set(this, async () => {
            this.hideWelcome = true;
            await new Promise(resolve => setTimeout(resolve, WELCOME_EXIT_DURATION));
        });
        this.showHeader = false;
        this.showSuggestedPrompts = false;
        this.hideWelcome = false;
        this.welcomeTitle = undefined;
        this.welcomeGreeting = undefined;
        this.suggestedPrompts = undefined;
        this.suggestedPrompRequestedCallback = undefined;
    }
    async componentWillLoad() {
        __classPrivateFieldSet(this, _GxIdeChatWelcome_componentLocale, await Locale.getComponentStrings(this.el), "f");
        // Set defaults
        if (!this.welcomeTitle) {
            this.welcomeTitle = __classPrivateFieldGet(this, _GxIdeChatWelcome_componentLocale, "f").welcomeTitle;
        }
        if (!this.welcomeGreeting) {
            this.welcomeGreeting = __classPrivateFieldGet(this, _GxIdeChatWelcome_componentLocale, "f").welcomeGreeting;
        }
        if (!this.suggestedPrompts) {
            this.suggestedPrompts = __classPrivateFieldGet(this, _GxIdeChatWelcome_componentLocale, "f").suggestedPrompts;
        }
    }
    componentDidRender() {
        if (!this.hideWelcome) {
            __classPrivateFieldGet(this, _GxIdeChatWelcome_animationEntrance, "f").call(this);
        }
    }
    /**
     * It will exit the wellcome screen and remove it from the dom.
     */
    async exitWelcome() {
        __classPrivateFieldGet(this, _GxIdeChatWelcome_animationExit, "f").call(this);
    }
    render() {
        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: { "welcome-container": true, "hidden": this.hideWelcome }, style: {
                "backgroundImage": `url(${HEADER_ILLUSTRATION})`,
                "--transition-duration": `${WELCOME_EXIT_DURATION}ms`
            } }, h("header", { class: { "header": true, "header--visible": this.showHeader }, style: {
                "--transition-delay": `${HEADER_TRANSITION_DELAY}ms`,
                "--transition-duration": `${HEADER_TRANSITION_DURATION}ms`
            } }, h("span", { class: "header__circle", style: { backgroundImage: `url(${AI_AVATAR})` } }), h("h2", { class: "header__title" }, this.welcomeTitle), h("p", { class: "header__greeting" }, this.welcomeGreeting)), this.suggestedPrompts && this.showSuggestedPrompts && (h("ul", { class: "suggested-prompts" }, this.suggestedPrompts.map((prompt, i) => (h("li", { class: "suggested-prompts__item" }, h("button", { class: {
                "suggested-prompts__button": true
            }, onClick: __classPrivateFieldGet(this, _GxIdeChatWelcome_sendPromptToChat, "f"), style: {
                "--delay": `${SUGGESTED_PROMPT_BUTTON_INTERVAL * i}ms`
            }, "data-prommpt": prompt }, h("ch-image", { src: AI_ICON, class: "icon-m suggested-prompts__icon" }), prompt, h("ch-image", { src: ARROW_RIGHT_ICON, class: "icon-m suggested-prompts__icon" }))))))))));
    }
    static get is() { return "gx-ide-chat-welcome"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["chat-welcome.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["chat-welcome.css"]
        };
    }
    static get assetsDirs() { return ["gx-ide-assets/chat-welcome"]; }
    static get properties() {
        return {
            "welcomeTitle": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The welcome title, if not provided, the default title will be used."
                },
                "attribute": "welcome-title",
                "reflect": false
            },
            "welcomeGreeting": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The welcome greeting description, if not provided, the default title will be used."
                },
                "attribute": "welcome-greeting",
                "reflect": false
            },
            "suggestedPrompts": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The suggested prompts, if not provided, the default title will be used."
                }
            },
            "suggestedPrompRequestedCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(\n    prompt: string\n  ) => Promise<void>",
                    "resolved": "(prompt: string) => Promise<void>",
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Fired when the user clicks on a suggested prompt button"
                }
            }
        };
    }
    static get states() {
        return {
            "showHeader": {},
            "showSuggestedPrompts": {},
            "hideWelcome": {}
        };
    }
    static get methods() {
        return {
            "exitWelcome": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "It will exit the wellcome screen and remove it from the dom.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
}
_GxIdeChatWelcome_componentLocale = new WeakMap(), _GxIdeChatWelcome_animationEntrance = new WeakMap(), _GxIdeChatWelcome_sendPromptToChat = new WeakMap(), _GxIdeChatWelcome_animationExit = new WeakMap();
//# sourceMappingURL=chat-welcome.js.map
