import { LitElement, css, html, nothing } from 'lit';
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
import { ProgressMixin } from '../../util/ProgressMixin.js';
import { ReadyMixin } from '../../util/ReadyMixin.js';
/**
 * A horizontal linear progress bar for showing task completion.
 *
 * @element btu-linear-progress
 *
 * @fires {CustomEvent} btu-linear-progress-ready - Fired after first render and initialization
 * @fires {CustomEvent} btu-linear-progress-complete - Fired when progress reaches 100
 *
 * @cssprop --progress-color - Custom progress bar color (overrides theme color)
 * @cssprop --track-color - Track/background color (overrides default gray-100)
 *
 * @example
 * ```html
 * <!-- Basic progress bar (fills container width) -->
 * <btu-linear-progress progress="50" color="primary"></btu-linear-progress>
 *
 * <!-- Control width via CSS -->
 * <btu-linear-progress progress="75" color="success" label="75%" style="width: 300px;"></btu-linear-progress>
 * ```
 */
export default class LinearProgress extends ProgressMixin(EventEmitterMixin(ReadyMixin(LitElement))) {
    constructor() {
        super(...arguments);
        /** @internal */
        this._initialClasses = [];
    }
    connectedCallback() {
        super.connectedCallback();
        // Capture initial classes from backend HTML
        if (this.className) {
            this._initialClasses = this.className.split(' ').filter(c => c.trim());
        }
    }
    createRenderRoot() {
        return this;
    }
    willUpdate() {
        const classes = [...this._initialClasses, 'inline-flex', 'items-center', 'w-full'];
        this.className = classes.join(' ');
    }
    firstUpdated(changedProperties) {
        super.firstUpdated(changedProperties);
        this._setupInitialAnimation();
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this._cleanupInitialAnimation();
    }
    updated(changedProperties) {
        super.updated(changedProperties);
        // Track completion at 100%
        this._trackCompletion();
    }
    render() {
        const height = this.thickness ?? 8; // default thickness is 8
        const color = this._getProgressColorValue();
        const progressValue = this._getAnimatedProgress();
        return html `
      <div class="flex w-full items-center gap-3">
        <span
          class="flex-1 blokk"
          role="progressbar"
          aria-label="${this.ariaLabel || nothing}"
          aria-labelledby="${this.ariaLabelledBy || nothing}"
          aria-valuenow="${progressValue}"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuetext="${this.ariaValueText || this.label || `${progressValue} percent`}"
        >
          <div
            class="relative overflow-hidden rounded-full bg-[var(--track-color,_oklch(var(--btu-theme-gray-100)))]"
            style="height: ${height}px;"
          >
            <div
              class="h-full rounded-full [transition:_width_0.3s_ease]"
              style="width: ${progressValue}%; background-color: ${color};"
            ></div>
          </div>
        </span>
        ${this.label
            ? html `<span class="flex-shrink-0 whitespace-nowrap text-sm font-medium text-gray-700">${this.label}</span>`
            : ''}
      </div>
    `;
    }
}
// Register custom element with guard to prevent double registration
if (!customElements.get('btu-linear-progress')) {
    customElements.define('btu-linear-progress', LinearProgress);
}
//# sourceMappingURL=LinearProgress.js.map