const picker = document.getElementById('hour-picker');
window.selectedHour = null;
const itemHeight = 50;
let isScrolling = false;
import {
    loadTodaysBookings,
    isHourBooked,
    loadSelectedDateBookings
} from './getData.js';
await loadTodaysBookings(0);
let isHourSelectedBooked = false;


let currentIndex = 0;

const btn = document.getElementById("btn");
const input1 = document.getElementById("name");
const input2 = document.getElementById("email");
const input3 = document.getElementById("phone");
const dpicker = document.getElementById("ranged");


// Create items
for (let h = 8; h <= 18; h++) {
    const item = document.createElement('div');
    item.textContent = `${String(h).padStart(2, '0')}:00`;
    picker.appendChild(item);
}

const defaultIndex = 0;
picker.scrollTop = defaultIndex * itemHeight;
updateActive(defaultIndex);

picker.addEventListener('wheel', (e) => {
    e.preventDefault();
    if (isScrolling) return;

    isScrolling = true;

    let index = Math.round(picker.scrollTop / itemHeight);
    if (e.deltaY > 0) {
        index = Math.min(index + 1, picker.children.length - 1);
    } else {
        index = Math.max(index - 1, 0);
    }

    picker.scrollTo({
        top: index * itemHeight,
        behavior: 'smooth'
    });

    setTimeout(() => {
        isScrolling = false;
    }, 200);
}, {
    passive: false
});

let scrollTimeout;
picker.addEventListener('scroll', () => {
    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(() => {
        let index = Math.round(picker.scrollTop / itemHeight);
        index = Math.max(0, Math.min(index, picker.children.length - 1));
        picker.scrollTo({
            top: index * itemHeight,
            behavior: 'smooth'
        });
        currentIndex = index;
        enableBtn();
    }, 100);
});

function updateActive(index) {
    for (let i = 0; i < picker.children.length; i++) {
        picker.children[i].classList.remove('active');
    }
    picker.children[index + 1].classList.add('active');

    window.selectedHour = picker.children[index + 1]?.textContent.trim();
    const selectedHourFormatted = selectedHour + ":00";
    isHourSelectedBooked = isHourBooked(selectedHourFormatted);

    return isHourSelectedBooked;
}

export function enableBtn() {
  let inputs = checkInputs();
  let isBooked = updateActive(currentIndex);

  // Reset only non-active items to default color
  picker.querySelectorAll('div').forEach(item => {
    if (!item.classList.contains('active')) {
      item.style.color = '#aaa';
    }
  });

  let activeDiv = picker.querySelector('.active');

  if (isBooked) {
    activeDiv.style.color = '#a84747ff'; // booked color
  } else {
    activeDiv.style.color = '#222'; // available color
  }

  if (isBooked || !inputs) {
    btn.disabled = true;
  } else {
    btn.disabled = false;
  }
}


[input1, input2, input3, dpicker].forEach(input => {
    input.addEventListener("input", enableBtn);
    input.addEventListener("change", enableBtn);
});

setInterval(() => {
    enableBtn();
}, 200);

enableBtn()