/**
 * ProgressBar Component
 * <progress-bar value="50"></progress-bar>
 * 
 * This is a element with a Qt Styled Progressbar!
 * 
 * utml 2025 - Utility Tag Markup Layer
 */

class ProgressBar extends HTMLElement {
    constructor() {
        super();

        const shadow = this.attachShadow({mode: 'open'});

        // Outer container
        const container = document.createElement('div');
        container.style.width = '300px';
        container.style.height = '25px';
        container.style.background = '#ddd';
        container.style.borderRadius = '4px';
        container.style.overflow = 'hidden';
        container.style.position = 'relative';

        // Inner value bar
        const valueBar = document.createElement('div');
        valueBar.style.width = '0%';
        valueBar.style.height = '100%';
        valueBar.style.backgroundColor = '#4a90e2';
        valueBar.style.backgroundImage = `
            linear-gradient(
                45deg,
                rgba(255,255,255,0.3) 25%,
                rgba(255,255,255,0) 25%,
                rgba(255,255,255,0) 50%,
                rgba(255,255,255,0.3) 50%,
                rgba(255,255,255,0.3) 75%,
                rgba(255,255,255,0) 75%,
                rgba(255,255,255,0) 100%
            )
        `;
        valueBar.style.backgroundSize = '40px 40px';
        valueBar.style.animation = 'barberpole 1s linear infinite';

        valueBar.style.transition = 'width 0.3s ease';
        container.appendChild(valueBar);

        // Add styles
        const style = document.createElement('style');
        style.textContent = `
            @keyframes barberpole {
                from { background-position: 0 0; }
                to   { background-position: 40px 0; } /* only horizontal movement */
            }
        `;
        shadow.appendChild(style);
        shadow.appendChild(container);

        this._valueBar = valueBar;
    }

    static get observedAttributes() { return ['value']; }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'value') {
            const val = Math.min(100, Math.max(0, Number(newValue)));
            this._valueBar.style.width = val + '%';

            // Start/stop barber pole animation based on value
            if (val < 100) {
                this._valueBar.style.animation = 'barberpole 1s linear infinite';
            } else {
                this._valueBar.style.animation = 'none'; // stop animation
            }
        }
    }


    get value() { return Number(this.getAttribute('value')) || 0; }
    set value(val) { this.setAttribute('value', val); }
}

// Define custom element
customElements.define('progress-bar', ProgressBar);