var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, css, html, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
import { ProgressMixin } from '../../util/ProgressMixin.js';
import { ReadyMixin } from '../../util/ReadyMixin.js';
/**
 * A circular progress indicator for showing loading states or progress.
 *
 * @element btu-circular-progress
 *
 * @fires {CustomEvent} btu-circular-progress-ready - Fired after first render and initialization
 * @fires {CustomEvent} btu-circular-progress-complete - Fired when determinate progress reaches 100
 *
 * @cssprop --progress-color - Custom progress indicator color (overrides theme color)
 * @cssprop --track-color - Track/background color (overrides default gray-100)
 * @cssprop --progress-size - Custom size in pixels (overrides size preset)
 *
 * @example
 * ```html
 * <!-- Indeterminate spinner (default) -->
 * <btu-circular-progress color="primary" size="md"></btu-circular-progress>
 *
 * <!-- Determinate progress -->
 * <btu-circular-progress indeterminate="false" progress="75" color="success"></btu-circular-progress>
 * ```
 */
export default class CircularProgress extends ProgressMixin(EventEmitterMixin(ReadyMixin(LitElement))) {
    constructor() {
        super(...arguments);
        /**
         * Whether the progress indicator is indeterminate (animated spinner).
         * When false, shows determinate progress based on the progress value.
         * @attr
         */
        this.indeterminate = true;
        /**
         * Size variant.
         * - 'sm': Small (16px) - default
         * - 'md': Medium (32px)
         * - 'lg': Large (48px)
         * @attr
         */
        this.size = 'sm';
        /** @internal */
        this._initialClasses = [];
    }
    connectedCallback() {
        super.connectedCallback();
        // Capture initial classes from backend HTML
        if (this.className) {
            this._initialClasses = this.className.split(' ').filter(c => c.trim());
        }
        // Observe style attribute changes to detect --progress-size updates
        this._styleObserver = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                    this.requestUpdate();
                }
            });
        });
        this._styleObserver.observe(this, {
            attributes: true,
            attributeFilter: ['style'],
        });
    }
    createRenderRoot() {
        return this;
    }
    willUpdate() {
        const classes = [...this._initialClasses, 'inline-flex', 'flex-col', 'items-center'];
        this.className = classes.join(' ');
    }
    firstUpdated(changedProperties) {
        super.firstUpdated(changedProperties);
        // Only setup initial animation for determinate mode
        if (!this.indeterminate) {
            this._setupInitialAnimation();
        }
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this._styleObserver?.disconnect();
        this._cleanupInitialAnimation();
    }
    updated(changedProperties) {
        super.updated(changedProperties);
        // Setup animation if switching to determinate mode
        if (changedProperties.has('indeterminate') && !this.indeterminate) {
            this._setupInitialAnimation();
        }
        // Only track completion in determinate mode
        if (!this.indeterminate) {
            this._trackCompletion();
        }
    }
    render() {
        // Determine size: check --progress-size CSS property, fallback to size preset
        const sizeMap = { sm: 16, md: 32, lg: 48 };
        const customSize = getComputedStyle(this).getPropertyValue('--progress-size').trim();
        const parsed = parseFloat(customSize);
        const size = customSize && !isNaN(parsed) && parsed > 0 ? parsed : (sizeMap[this.size] ?? sizeMap.sm);
        const thickness = this.thickness ?? 2; // default thickness is 2
        const color = this._getProgressColorValue();
        const radius = (size - thickness) / 2;
        const circumference = 2 * Math.PI * radius;
        const center = size / 2;
        const progressValue = this._getAnimatedProgress();
        const strokeDashoffset = this.indeterminate ? 0 : circumference - (progressValue / 100) * circumference;
        return html `
      <span
        class="blokk"
        role="progressbar"
        aria-label="${this.ariaLabel || nothing}"
        aria-labelledby="${this.ariaLabelledBy || nothing}"
        aria-valuenow="${this.indeterminate ? nothing : progressValue}"
        aria-valuemin="${this.indeterminate ? nothing : '0'}"
        aria-valuemax="${this.indeterminate ? nothing : '100'}"
        aria-valuetext="${this.indeterminate
            ? nothing
            : this.ariaValueText || this.label || `${progressValue} percent`}"
      >
        <svg
          class="${this.indeterminate ? 'animate-circular-progress-rotate' : ''} blokk"
          width="${size}"
          height="${size}"
          viewBox="0 0 ${size} ${size}"
          aria-hidden="true"
        >
          <circle
            cx="${center}"
            cy="${center}"
            r="${radius}"
            fill="none"
            stroke="var(--track-color, oklch(var(--btu-theme-gray-100)))"
            stroke-width="${thickness}"
          />
          <circle
            class="${this.indeterminate
            ? 'animate-circular-progress-dash'
            : '-rotate-90'} origin-center transition-all duration-300 ease-in-out"
            cx="${center}"
            cy="${center}"
            r="${radius}"
            fill="none"
            stroke="${color}"
            stroke-width="${thickness}"
            stroke-dasharray="${this.indeterminate ? '1, 200' : circumference}"
            stroke-dashoffset="${this.indeterminate ? '0' : strokeDashoffset}"
            stroke-linecap="round"
          />
        </svg>
      </span>
      ${this.label ? html `<span class="mt-2 text-center text-xs font-medium text-gray-700">${this.label}</span>` : ''}
    `;
    }
}
__decorate([
    property({ type: Boolean })
], CircularProgress.prototype, "indeterminate", void 0);
__decorate([
    property({ type: String })
], CircularProgress.prototype, "size", void 0);
// Register custom element with guard to prevent double registration
if (!customElements.get('btu-circular-progress')) {
    customElements.define('btu-circular-progress', CircularProgress);
}
//# sourceMappingURL=CircularProgress.js.map