/**
@license
Copyright (c) 2025 trading_peter
This program is available under Apache License Version 2.0
*/

import { LitElement, html, css } from 'lit';

export class TpProgressBar extends LitElement {
  static get styles() {
    return css`
      :host {
        display: block;
      }

      .bar {
        background: #EEEEEE;
        border-radius: 8px;
        height: var(--tp-progress-bar-height, 16px);
        border-radius: var(--tp-progress-bar-border-radius, 8px);
        position: relative;
        overflow: hidden;
        transform: translate3d(0, 0, 0);
      }

      #progress {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 8px;
        transform: translateX(-100%);
        background: var(--tp-progress-bar-color, #039BE5);
        transition: transform 200ms linear;
      }
    `;
  }

  render() {
    return html`
      <div class="bar">
        <div id="progress"></div>
      </div>
    `;
  }
  
  static get properties() {
    return {
      progress: { type: Number },
    };
  }

  constructor() {
    super();
    this.progress = 0;
  }
  
  updated(changedProperties) {
    if (changedProperties.has('progress')) {
      this._progressChanged(this.progress);
    }
  }

  _progressChanged(value) {
    value = Math.max(0, Math.min(100, value));
    const progress = this.shadowRoot.querySelector('#progress');
    progress.style.transform = `translateX(-${100 - value}%)`;
  }
}

window.customElements.define('tp-progress-bar', TpProgressBar);