import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    connect() {
        // Écoute tous les clics sur .open-modal -> détournement vers #lastStep + MAJ des options du formulaire
        document.querySelectorAll('.planning-cell-free').forEach(element => {
            element.addEventListener('click', this.handleClick.bind(this))
        })
    }

    handleClick(event) {
        event.preventDefault()
        const slotId = event.currentTarget.dataset.id

        if (!slotId) return

        // A partir du slotId ->
        // 1. trouver les slots disponible suviants
        // 2. mettre à jour le formulaire
        // 3. forcer un scroll jusqu'à #lastStep

        // Etape 1
        fetch(`/api/slot/${slotId}/nexts`, {
          method: 'POST',
          headers: {
            'Accept': 'application/json'
          }
        })
          .then(response => {
            if (!response.ok) {
              throw new Error(`Erreur API: ${response.status}`);
            }
            return response.json();
          })
          .then(data => {
            
            // Etape 2
            console.log('ID du slot cliqué :', slotId);
            console.log('IDs des slots suivants :', data.next_slots);
            console.log('Horaire de début :', data.start_date);
            console.log('Horaires de fin :', data.end_dates);

            const select = document.querySelector('#party_slots');
            select.innerHTML = ''; // Vider les anciennes options

            const ids = data.next_slots;      // ex: [1, 2, 3, 4]
            const labels = data.end_dates;    // ex: ["07/08/25 14:00", "07/08/25 16:00", "07/08/25 18:00", "07/08/25 20:00"]

            let cumulativeIds = [];

            ids.forEach((id, index) => {
              cumulativeIds.push(id); // on ajoute l'ID courant à la liste

              const value = cumulativeIds.join('|'); // ex: "1|2|3"
              const label = labels[index] || `Créneau ${id}`; // on sécurise

              const option = document.createElement('option');
              option.value = value;
              option.textContent = label;

              select.appendChild(option);
            });

            const start = document.querySelector('#party_start');
            start.innerHTML = '';
            start.innerHTML = data.start_date;

            document.querySelector('#lastStep')?.scrollIntoView({ behavior: 'smooth' });

          })
          .catch(error => {
            console.error('Erreur lors de la récupération des slots :', error);
          });



        





    }

    disconnect() {
    this.element.querySelectorAll('.planning-cell-free').forEach(element => {
        element.removeEventListener('click', this.handleClick)
    })
}


}