import { Controller } from '@hotwired/stimulus';

/* stimulusFetch: 'lazy' */
export default class extends Controller {
  static targets = ['progressBar', 'progressText']
  static values = {
    chapterId: Number
  }

  connect() {
    this.currentPage = 0;
    this.totalPages = 0;
    this.progressBarElement = this.progressBarTarget.querySelector('.bg-blue-600');

    const mercureHubUrl = 'https://localhost/.well-known/mercure';
    this.eventSource = new EventSource(`${mercureHubUrl}?topic=activity`);

    this.eventSource.onmessage = this.handleMessage.bind(this);
  }

  disconnect() {
    if (this.eventSource) {
      this.eventSource.close();
    }
  }

  handleMessage(event) {
    const data = JSON.parse(event.data);
    if (data.status === "Page Scrapping progress" && data.chapterId === this.chapterIdValue) {
      this.handleProgressUpdate(data);
    }
  }

  handleProgressUpdate(data) {
    this.currentPage = data.pageIndex + 1;
    this.totalPages = data.totalPages;

    if (this.currentPage > 1) {
      this.progressBarTarget.classList.remove('hidden');
    }

    this.updateProgressBar();
  }

  updateProgressBar() {
    const progress = (this.currentPage / this.totalPages) * 100;
    this.progressBarElement.style.width = `${progress}%`;
    this.progressTextTarget.textContent = `${this.currentPage} / ${this.totalPages}`;
  }
}