// Что нам нужно для работы кнопки Отметить выполнение?
    // 1. Найти все кнопки отметить выполнение.
    // 2. На каждую кнопку повесить слушатель события клик(нажатие мышью)
    // 3. Внутри слушателя события выполнить логику выполнения привычки - вызвать функцию markHabitDone
    // 4. Перерисовать интерфейс

const HabitTrackerApp = {
    elements: {
        habitGrid: null,
        addHabitForm: null,
        addHabbitButton: null,
        habbitDoneButtons: [],
    },

    init: function() {
        this.loadElements();
        this.render();
        this.loadDynamicElements();
        this.setupEventListeners();
    },

    setupEventListeners: function() {
        this.elements.addHabbitButton.addEventListener('click', () => {
            //this.elements.addHabitForm.style.display = 'block';
        });

        this.elements.habbitDoneButtons.forEach(
            button => {
                return button.addEventListener('click', (event) => {
                    const cardId = event.target.closest('.habit-card').dataset.habitId;
                    // разобраться почему не находит привычку
                    HabitManager.markHabitDone(cardId);
                    HabitManager.saveToLocalStorage();
                    this.init();
                });
            }
        );
        
        // пройти циклом по habbitDoneButtons. На каждый элемент массива
        // добавить addEventListener по клику.
        // и в обработчике события вывести console.log
    },

    loadElements: function() {
        this.elements.habitGrid = document.getElementById('habits-grid');
        this.elements.addHabitForm = document.getElementById('add-habit-form');
        this.elements.addHabbitButton = document.getElementById('add-habbit-button');
        setTimeout(() => {
            this.elements.habbitDoneButtons = document.querySelectorAll('.button--primary');
        }, 1000);
        
    },

    loadDynamicElements: function() {
        this.elements.habbitDoneButtons = document.querySelectorAll('.button--primary');
    },

    render: function() {
        const habitsHTML = HabitManager.habits.map(habit => {
            const cardClass = `habit-card ${habit.isCompleted ? 'habit-card--completed' : ''}`;
            const progress = (habit.currentCount / habit.targetCount) * 100;

            return `<div class="${cardClass}" data-habit-id="${habit.id}">
                        <div class="habit-card__header">
                            <div class="habit-card__icon">💧</div>
                            <h3 class="habit-card__title">${habit.name}</h3>
                        </div>

                        <p class="habit-card__description">${habit.description}</p>

                        <div class="habit-card__progress">
                            <div class="habit-card__progress-info">
                                <span>Прогресс</span>
                                <span>${progress}%</span>
                            </div>
                            <div class="habit-card__progress-bar">
                                <div class="habit-card__progress-fill" style="width: ${progress}%"></div>
                            </div>
                        </div>

                        <div class="habit-card__actions">
                            <button class="button button--primary">${habit.isCompleted ? 'Выполнено' : 'Отметить выполнение'}</button>
                            <button class="button button--secondary">Подробнее</button>
                        </div>
                </div>
                `
        }).join('');

        this.elements.habitGrid.innerHTML = habitsHTML;
    }
}

HabitTrackerApp.loadFromLocalStorage = function() {
    HabitManager.loadFromLocalStorage();

    if (HabitManager.habits.length == 0) {
        HabitManager.createHabit('Учить js', 'Писать не менее 1000000000 строк кода в день', 8);
        HabitManager.saveToLocalStorage();
    }

}

document.addEventListener('DOMContentLoaded', () => {
    HabitTrackerApp.loadFromLocalStorage();
    HabitTrackerApp.init();
});