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

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

class TpTimeoutStrip extends LitElement {
  static get styles() {
    return [
      css`
        :host {
          display: block;
          height: var(--tp-timeout-strip-width, 3px);
          pointer-events: none;
        }

        .strip {
          height: 100%;
          width: 100%;
          background: var(--tp-timeout-strip-color, #000);
          transform-origin: left;
          display: none;
        }

        .strip.active {
          display: block;
          animation: shrink linear forwards;
        }

        @keyframes shrink {
          from {
            transform: scaleX(1);
          }
          to {
            transform: scaleX(0);
          }
        }
      `
    ];
  }

  render() {
    return html`
      <div class="strip ${this.active ? 'active' : ''}" style="animation-duration: ${this.timeout}ms" @animationend=${this._onAnimationEnd}></div>
    `;
  }

  static get properties() {
    return {
      active: { type: Boolean },
      timeout: { type: Number }
    };
  }

  constructor() {
    super();
    this.active = false;
    this.timeout = 0;
    this._onAnimationEnd = this._onAnimationEnd.bind(this);
  }

  show(timeout) {
    this.timeout = timeout;
    this.active = true;
  }

  _onAnimationEnd() {
    this.active = false;
    this.dispatchEvent(new CustomEvent('timeout', { detail: null, bubbles: true, composed: true }));
  }
}

window.customElements.define('tp-timeout-strip', TpTimeoutStrip);