/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { __decorate } from "tslib";
import { html, } from 'lit';
import { customElement, query, property } from 'lit/decorators.js';
import { styles } from './nile-circular-progressbar.css';
import NileElement from '../internal/nile-element';
let NileCircularProgressbar = class NileCircularProgressbar extends NileElement {
    constructor() {
        super(...arguments);
        this.value = 0;
        // Add a flag to track if the value is invalid
        this.isInvalidValue = false;
        this.size = 40;
    }
    static get styles() {
        return [styles];
    }
    get circleSize() {
        const radius = this.size / 2 - 4;
        return {
            radius,
            viewBox: this.size,
            fontSize: `${this.size * 0.25}px`,
        };
    }
    connectedCallback() {
        super.connectedCallback();
        this.updateComplete.then(() => {
            this.value = Math.max(0, Math.min(100, this.value));
            this.setProgress(this.value);
        });
    }
    setProgress(percent) {
        if (this.progressCircle) {
            const circleRadius = this.progressCircle.r.baseVal.value;
            const circumference = circleRadius * 2 * Math.PI;
            this.progressCircle.style.transition = 'stroke-dashoffset 0.8s ease-in-out';
            this.progressCircle.style.strokeDasharray = `${circumference}`;
            this.progressCircle.style.strokeDashoffset = `${circumference - (percent / 100) * circumference}`;
        }
    }
    validateValue() {
        if (isNaN(this.value) || this.value < 0 || this.value > 100) {
            console.error(`[NileCircularProgressBar]: Invalid value (${this.value}) detected. Value must be between 0 to 100.`);
            this.value = 0;
            this.isInvalidValue = true;
        }
        else {
            this.isInvalidValue = false;
        }
    }
    updated(changedProperties) {
        if (changedProperties.has('value')) {
            this.validateValue();
            this.setProgress(this.value);
            if (this.value === 100) {
                this.emit('nile-complete', { message: 'Nile Circular Progress reached 100%' });
            }
        }
    }
    render() {
        const { radius, viewBox, fontSize } = this.circleSize;
        // Modified innerText logic
        const innerText = this.isInvalidValue
            ? ' '
            : (this.content ?? `${Math.round(this.value)}%`); // Show "Null" for invalid, otherwise keep original behavior
        return html `
      <svg width="${viewBox}" height="${viewBox}" viewBox="0 0 ${viewBox} ${viewBox}">
        <circle r="${radius}" cx="${viewBox / 2}" cy="${viewBox / 2}" class="track"></circle>
        <circle r="${radius}" cx="${viewBox / 2}" cy="${viewBox / 2}" class="progress"></circle>
        
        <text
          x="50%"
          y="53%"
          text-anchor="middle"
          alignment-baseline="middle"
          class="circle__text"
          style="font-size: ${fontSize};"
        >
          ${innerText}
        </text>
      </svg>
    `;
    }
};
__decorate([
    query('.progress')
], NileCircularProgressbar.prototype, "progressCircle", void 0);
__decorate([
    property({ type: Number, reflect: true })
], NileCircularProgressbar.prototype, "value", void 0);
__decorate([
    property({ type: String, reflect: true })
], NileCircularProgressbar.prototype, "content", void 0);
__decorate([
    property({ type: Number, reflect: true })
], NileCircularProgressbar.prototype, "size", void 0);
NileCircularProgressbar = __decorate([
    customElement('nile-circular-progressbar')
], NileCircularProgressbar);
export { NileCircularProgressbar };
export default NileCircularProgressbar;
//# sourceMappingURL=nile-circular-progressbar.js.map