import { Host, h } from "@stencil/core";
import { Icon } from "../internal-component/icon";
import { configStore } from "../../store/store";
export class StatusBadge {
    /** loading | completed */
    status;
    /** Label text displayed inside the badge */
    label;
    /** CSS padding shorthand, e.g. `6px 12px` */
    padding;
    /** Border width in px */
    borderWidth = 1;
    /** Corner radius in px */
    radius = 20;
    /** Accent color for border and text (falls back to theme secondary) */
    color;
    getEffectiveColor() {
        if (this.color)
            return this.color;
        const theme = configStore.get('theme');
        return theme === 'dark' ? 'var(--color-secondary-dark)' : 'var(--color-secondary)';
    }
    renderLeading(color) {
        switch (this.status) {
            case 'loading':
                return (h("div", { style: { width: '14px', height: '14px' }, class: "status-badge" }, h(Icon, { name: "LoaderCircle", addClass: "status-badge-loading-icon" })));
            case 'completed': {
                return (h("div", { class: "rounded-full status-badge", style: { width: '16px', height: '16px', backgroundColor: color } }, h(Icon, { name: "Check", addClass: "size-3 text-background" })));
            }
        }
    }
    render() {
        const color = this.getEffectiveColor();
        return (h(Host, { key: 'e8ac6e5c69b991fe296462ed7595c0226d3973e6' }, h("div", { key: '03a6c296fd19dddf4933185e944c06cad9020dc4', class: "status-badge-wrapper bg-background", style: {
                borderRadius: `${this.radius}px`,
                border: `${this.borderWidth}px solid ${color}`,
                padding: this.padding || '6px 12px',
                color: color,
            }, title: this.label }, this.renderLeading(color), h("span", { key: 'ebd2490aa07c7e3e0b7d7d01c2fdead45bcdd5aa', class: "status-badge-label", style: { lineHeight: '1' } }, this.label))));
    }
    static get is() { return "status-badge"; }
    static get originalStyleUrls() {
        return {
            "$": ["status-badge.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["status-badge.css"]
        };
    }
    static get properties() {
        return {
            "status": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'loading' | 'completed'",
                    "resolved": "\"completed\" | \"loading\"",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "loading | completed"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "status"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label text displayed inside the badge"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "padding": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "CSS padding shorthand, e.g. `6px 12px`"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "padding"
            },
            "borderWidth": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Border width in px"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "border-width",
                "defaultValue": "1"
            },
            "radius": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Corner radius in px"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "radius",
                "defaultValue": "20"
            },
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Accent color for border and text (falls back to theme secondary)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "color"
            }
        };
    }
}
