jQuery(document).ready(function ($) {
    renderWeek(Date.now());
});

const config = {
    dayStart: 6,
    dayEnd: 22,
}

const loadWeek = (timestamp) => {
    
};

const renderWeek = (timestamp) => {

    const weekElement = document.createElement('div');  
    weekElement.classList.add('row', 'g-1', 'mt-1', 'week');
    weekElement.id = 'week';

    const queryDate = new Date(timestamp);
    let monday = queryDate;

    if (!dateFns.isMonday(queryDate)) {
        monday = dateFns.previousMonday(queryDate);
    }

    const sunday = dateFns.nextSunday(monday);

    const days = dateFns.eachDayOfInterval({
        start: monday,
        end: sunday
    });


    days.forEach(day => {
        const dayElement = document.createElement('div');
        dayElement.classList.add('day');
        dayElement.innerHTML = day.getDate();
        renderDay(day);
    });

    return weekElement;

    /*
    
        const beginOfWeek = dateFns.startOfWeek(queryDate);
        const endOfWeek = dateFns.endOfWeek(queryDate);
    
        const days = [];
        let currentDay = beginOfWeek;
    
        while (currentDay <= endOfWeek) {
            days.push(currentDay);
            currentDay = dateFns.addDays(currentDay, 1);
        }
    
        const displayWeek = document.getElementById('display-week');
        displayWeek.innerHTML = '';
    
        days.forEach(day => {
            const dayElement = document.createElement('div');
            dayElement.classList.add('day');
            dayElement.innerHTML = day.getDate();
            displayWeek.appendChild(dayElement);
        });
    */
};

const renderDay = (timestamp) => {
    const beginOfDay = new Date(timestamp);
    beginOfDay.setHours(config.dayStart, 0, 0, 0);

    const endOfDay = new Date(timestamp);
    endOfDay.setHours(config.dayEnd, 0, 0, 0);

    const hours = dateFns.eachHourOfInterval({
        start: beginOfDay,
        end: endOfDay
    });

    let renderedDayHtml = ''

    hours.forEach(hour => {
        renderedDayHtml += renderHour(hour);
    });

    return renderedDayHtml;
};

const renderHour = (timestamp) => {
    const hourElement = document.createElement('div');
    hourElement.classList.add('day-hour');
    hourElement.innerHTML = timestamp.getHours() + ':00';
    hourElement.appendChild(renderMinute(timestamp));
    return hourElement;
};

const renderMinute = (timestamp) => {
    const minuteElement = document.createElement('div');
    minuteElement.classList.add('day-minute', 'bg-primary-subtle');
    minuteElement.title = 'Frei!';
    minuteElement.innerHTML = "&nbsp;";
    return minuteElement;
};