import { h, } from "@stencil/core";
import { getIconName } from "../../icon/get-icon-props";
/**
 * @private
 */
export class ProgressFlowItem {
    constructor() {
        /**
         * The flow item that should be rendered
         */
        this.item = null;
        /**
         * True if the flow item should be disabled
         */
        this.disabled = false;
        /**
         * True if the flow item should be readonly
         */
        this.readonly = false;
        /**
         * True for current step
         */
        this.currentStep = false;
        this.handleClick = () => {
            this.interact.emit();
        };
    }
    render() {
        var _a;
        if (!this.item) {
            return;
        }
        return [
            h("button", { tabindex: "0", title: this.getToolTipText(), type: "button", class: {
                    step: true,
                    selected: (_a = this.item) === null || _a === void 0 ? void 0 : _a.selected,
                    disabled: this.isDisabled(),
                    readonly: this.readonly,
                }, onClick: this.handleClick, disabled: this.isDisabled(), "aria-current": this.currentStep ? 'step' : null }, this.renderIcon(), h("span", { class: "text" }, this.item.text), this.renderDivider(), this.renderLockIcon()),
            this.renderSecondaryText(),
        ];
    }
    isDisabled() {
        var _a;
        return ((_a = this.item) === null || _a === void 0 ? void 0 : _a.disabled) || this.readonly || this.disabled;
    }
    getToolTipText() {
        if (!this.item.secondaryText) {
            return this.item.text;
        }
        return [this.item.text, this.item.secondaryText].join(' · ');
    }
    renderSecondaryText() {
        var _a;
        if (!((_a = this.item) === null || _a === void 0 ? void 0 : _a.secondaryText)) {
            return;
        }
        return h("div", { class: "secondary-text" }, this.item.secondaryText);
    }
    renderIcon() {
        if (!this.item.icon) {
            return;
        }
        const name = getIconName(this.item.icon);
        return h("limel-icon", { name: name, size: "small", class: "icon" });
    }
    renderDivider() {
        if (this.item.isOffProgress) {
            return;
        }
        return h("div", { class: "divider" });
    }
    renderLockIcon() {
        if (!this.isDisabled()) {
            return;
        }
        return h("limel-icon", { name: "lock", class: "lock-icon" });
    }
    static get is() { return "limel-progress-flow-item"; }
    static get originalStyleUrls() {
        return {
            "$": ["progress-flow-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["progress-flow-item.css"]
        };
    }
    static get properties() {
        return {
            "item": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "FlowItem",
                    "resolved": "FlowItem",
                    "references": {
                        "FlowItem": {
                            "location": "import",
                            "path": "../progress-flow.types",
                            "id": "src/components/progress-flow/progress-flow.types.ts::FlowItem",
                            "referenceLocation": "FlowItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The flow item that should be rendered"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "null"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "True if the flow item should be disabled"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "True if the flow item should be readonly"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "readonly",
                "defaultValue": "false"
            },
            "currentStep": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "True for current step"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "current-step",
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "interact",
                "name": "interact",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when clicking on the flow item"
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "element"; }
}
