import { Host, h } from "@stencil/core";
import { getIconPath } from "@genexus/mercury";
const CSS_BUNDLES = [
    "resets/box-sizing",
    "utils/form",
    "utils/layout",
    "utils/typography",
    "components/button",
    "components/icon",
    "components/combo-box",
    "components/edit",
    "components/tabular-grid"
];
const CLOSE_ICON = getIconPath({
    category: "system",
    name: "close",
    colorType: "primary"
});
const PROGRESS_TRANSITION_SPEED = 200;
export class GxIdeProgressBar {
    constructor() {
        this.evaluateInitialProgress = () => {
            if (this.progress === undefined &&
                (this.stateType === "error" ||
                    this.stateType === "warning" ||
                    this.stateType === "success")) {
                this.progress = 100;
            }
            else if (this.progress === undefined &&
                this.stateType === "in-progress") {
                this.progress = 0;
            }
            this.el.style.setProperty("--top-bar-progress", `${this.progress}%`);
        };
        this.closeClickHandler = () => {
            this.active = false;
            this.closedCallback();
        };
        this.renderClose = () => {
            return (this.closeType === "button" && (h("button", { class: "button-tertiary button-icon-only", "aria-label": "close", onClick: this.closeClickHandler, role: "button", tabIndex: this.visible ? 0 : -1 }, h("ch-image", { src: CLOSE_ICON, class: "icon-m" }))));
        };
        this.topStateBarVisible = false;
        this.disableTransition = false;
        this.visible = false;
        this.caption = undefined;
        this.minimal = false;
        this.active = false;
        this.stateType = "in-progress";
        this.progress = undefined;
        this.closeType = "button";
        this.closedCallback = () => { };
    }
    watchActiveHandler(active) {
        if (active) {
            this.visible = true;
            setTimeout(() => {
                this.topStateBarVisible = true;
            }, 300);
        }
        else {
            this.topStateBarVisible = false;
            setTimeout(() => {
                this.visible = false;
                this.el.style.setProperty("--top-bar-progress", `0%`);
                this.progressBarClosed.emit();
            }, 300);
        }
    }
    watchProgressHandler(progress) {
        if (progress >= 0 && progress <= 100) {
            this.el.style.setProperty("--top-bar-progress", `${progress}%`);
        }
        if (progress === 100 && this.closeType === "auto-close") {
            setTimeout(() => {
                this.active = false;
            }, 200);
        }
    }
    componentWillLoad() {
        this.evaluateInitialProgress();
        if (this.active) {
            this.visible = true;
            this.topStateBarVisible = true;
        }
    }
    /**
     * Sets the progress bar to zero instantly (no transition) and changes the type
     * to 'accent'. Useful when reusing the progress bar for a new process.
     */
    async reset() {
        // Resetting involves setting the progress to zero. In this case it is preferable
        // to disable the transition.
        this.disableTransition = true;
        this.progress = 0;
        this.stateType = "accent";
        setTimeout(() => {
            this.disableTransition = false; // enable transition for the nex process.
        }, PROGRESS_TRANSITION_SPEED);
    }
    render() {
        return (h(Host, { class: {
                "visible": this.visible,
                "with-close-button": this.closeType === "button",
                "disable-transition": this.disableTransition
            }, "aria-hidden": !this.active, style: {
                "--progress-bar-transition-speed": `${PROGRESS_TRANSITION_SPEED}ms`
            } }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { role: "status", "aria-labelledby": "label", "aria-hidden": !this.active, class: {
                "top-state-bar": true,
                [`top-state-bar--${this.stateType}`]: true,
                "top-state-bar--visible": this.topStateBarVisible
            } }, h("div", { class: "top-state-bar__outer-wrapper" }, !this.minimal ? (h("div", { class: "top-state-bar__inner-wrapper" }, h("label", { id: "label", class: {
                "top-state-bar__caption": true
            }, part: "label" }, this.caption), this.renderClose())) : null, h("div", { class: {
                "top-state-bar__progress-wrapper": true
            }, part: "progress-wrapper" }, h("span", { class: "progress-bar" }))))));
    }
    static get is() { return "gx-ide-progress-bar"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["progress-bar.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["progress-bar.css"]
        };
    }
    static get assetsDirs() { return ["gx-ide-assets/progress-bar"]; }
    static get properties() {
        return {
            "caption": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The top-bar title"
                },
                "attribute": "caption",
                "reflect": false
            },
            "minimal": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "It will only display the bar (no title, no close button)"
                },
                "attribute": "minimal",
                "reflect": true,
                "defaultValue": "false"
            },
            "active": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The top-bar active state. If false it will be hidden"
                },
                "attribute": "active",
                "reflect": false,
                "defaultValue": "false"
            },
            "stateType": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "TopStateBarType",
                    "resolved": "\"accent\" | \"error\" | \"in-progress\" | \"success\" | \"warning\"",
                    "references": {
                        "TopStateBarType": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/_helpers/progress-bar/progress-bar.tsx",
                            "id": "src/components/_helpers/progress-bar/progress-bar.tsx::TopStateBarType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The top-bar state"
                },
                "attribute": "state-type",
                "reflect": false,
                "defaultValue": "\"in-progress\""
            },
            "progress": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The progress bar progress"
                },
                "attribute": "progress",
                "reflect": false,
                "defaultValue": "undefined"
            },
            "closeType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"auto-close\" | \"button\"",
                    "resolved": "\"auto-close\" | \"button\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "How to display the close button"
                },
                "attribute": "close-type",
                "reflect": false,
                "defaultValue": "\"button\""
            },
            "closedCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "() => void",
                    "resolved": "() => void",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A callback that gets called when the top-state-bar is closed"
                },
                "defaultValue": "() => {}"
            }
        };
    }
    static get states() {
        return {
            "topStateBarVisible": {},
            "disableTransition": {},
            "visible": {}
        };
    }
    static get events() {
        return [{
                "method": "progressBarClosed",
                "name": "progressBarClosed",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted every time the progress bar is closed."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "reset": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets the progress bar to zero instantly (no transition) and changes the type\nto 'accent'. Useful when reusing the progress bar for a new process.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "active",
                "methodName": "watchActiveHandler"
            }, {
                "propName": "progress",
                "methodName": "watchProgressHandler"
            }];
    }
}
//# sourceMappingURL=progress-bar.js.map
