import { LitElement, html, css } from "lit";
import { customElement, property } from "lit/decorators.js";
export { SlProgressBar } from "@shoelace-style/shoelace";

interface Row {
  url: string;
  t: string;
  progress: string;
}

@customElement("ingest-status")
export class IngestStatus extends LitElement {
  @property() queue: Row[] = [];
  static styles = [
    css`
      table {
        background: #ccc;
      }
    `,
  ];
  connectedCallback(): void {
    super.connectedCallback();
    const es = new EventSource("../api/ingest/queue");
    es.onmessage = (ev) => {
      this.queue = JSON.parse(ev.data);
    };
  }
  render() {
    return html`
      <table>
        <thead>
          <th>Queued at</th>
          <th>Progress</th>
          <th>Source</th>
        </thead>
        <tbody id="processing">
          ${this.queue.map(
            (row) => html`
              <tr>
                <td>${row.t}</td>
                <td><sl-progress-bar value="${row.progress}" class="progress-bar-values">${row.progress}%</sl-progress-bar></td>
                <td>${row.url}</td>
              </tr>
            `
          )}
        </tbody>
      </table>
    `;
  }
}