import { LitElement, html, css, CSSResultGroup } from 'lit';
import styles from './nile-progress-bar.css';
import { customElement, property } from 'lit/decorators.js';
import NileElement from '../internal/nile-element';
@customElement('nile-progress-bar')
export class NileProgressBar extends NileElement {
  static override styles: CSSResultGroup = styles;

  @property({ type: Number, reflect: true, attribute: true }) value = 0;

  override updated(changedProperties: Map<string, any>) {
    if (changedProperties.has('value')) {
      if (this.value < 0 || this.value > 100) {
        console.error(`[NileProgressBar]: Invalid value (${this.value}) detected. Value must be between 0 and 100.`);
        this.value = 0;   
      }

      if (this.value === 100) {
        this.emit('nile-complete', { message: 'Nile Progress reached 100%' });
      }
    }
  }

  override render() {
    return html`
      <div part="container" class="nile-progress-bar__container">
        <ul part="progress-bar" class="nile-progress-bar__progress-bar">
          <li part="remaining"><span part="progress" style="width: ${this.value}%"></span></li>
        </ul>
      </div>
    `;
  }
}