import { __decorate } from "tslib";
import { html } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { styleMap } from "lit/directives/style-map.js";
import { UiRange } from "./Range.js";
import { isDisabled, setDisabled } from "../lib/disabled.js";
import { floatConverter } from "../lib/AttributeConverters.js";
export default class UiProgress extends UiRange {
    get disabled() {
        return isDisabled(this);
    }
    /**
     * When set, the button is a disabled state.
     * @attribute
     */
    set disabled(value) {
        const old = isDisabled(this);
        setDisabled(this, value);
        this.requestUpdate('disabled', old);
    }
    /**
     * @returns The ratio of the secondary progress.
     */
    get secondaryRatio() {
        return this.secondaryRatioInternal || 0;
    }
    connectedCallback() {
        super.connectedCallback();
        if (!this.hasAttribute('role')) {
            this.setAttribute('role', 'progressbar');
        }
    }
    willUpdate(cp) {
        super.willUpdate(cp);
        if (cp.has('secondaryProgress') || cp.has('indeterminate')) {
            this.rangeChanged();
        }
    }
    updated(cp) {
        if (cp.has('min')) {
            this.setAttribute('aria-valuemin', String(this.min));
        }
        if (cp.has('max')) {
            this.setAttribute('aria-valuemax', String(this.max));
        }
        if (cp.has('indeterminate') || cp.has('value')) {
            if (this.indeterminate) {
                this.removeAttribute('aria-valuenow');
            }
            else {
                this.setAttribute('aria-valuenow', String(this.value));
            }
        }
    }
    rangeChanged() {
        super.rangeChanged();
        const { secondaryProgress: sp } = this;
        if (typeof sp === 'number') {
            const secondary = this.clampValue(sp);
            this.secondaryRatioInternal = this.computeRatio(secondary) * 100;
        }
        else {
            this.secondaryRatioInternal = undefined;
        }
    }
    render() {
        const { secondaryRatio = 0, indeterminate = false, ratio = 0, disabled = false } = this;
        const primaryClasses = {
            primary: true,
            indeterminate: !disabled && indeterminate,
            linear: !indeterminate,
        };
        const primaryStyle = {};
        if (!indeterminate) {
            primaryStyle.transform = `scaleX(${(ratio / 100)})`;
        }
        const secondaryStyle = {
            transform: `scaleX(${(secondaryRatio / 100)})`,
        };
        const containerClasses = {
            container: true,
            disabled,
        };
        return html `
    <div class="${classMap(containerClasses)}">
      <div class="secondary" ?hidden="${secondaryRatio === 0}" style="${styleMap(secondaryStyle)}"></div>
      <div class="${classMap(primaryClasses)}" style="${styleMap(primaryStyle)}"></div>
    </div>
    `;
    }
}
__decorate([
    property({ reflect: true, type: Boolean })
], UiProgress.prototype, "disabled", null);
__decorate([
    property({ type: Number, converter: floatConverter })
], UiProgress.prototype, "secondaryProgress", void 0);
__decorate([
    property({ reflect: true, type: Boolean })
], UiProgress.prototype, "indeterminate", void 0);
//# sourceMappingURL=UiProgress.js.map