let currentFilters = {category: [], price: [], time: []};
export function initPlaceFilters($filtersContainer) {
    console.log("init places filters");

    // Одна общая функция для всех фильтров
    function toggleFilter(event) {
        const $btn = $(event.currentTarget);
        $btn.toggleClass('active');

        // Можно получить тип и значение фильтра
        const type = $btn.data('type');
        const value = $btn.data('value');

        console.log(`Фильтр: ${type} = ${value}, активен: ${$btn.hasClass('active')}`);

        // ОБНОВЛЯЕМ МАССИВ ФИЛЬТРОВ!
        if ($btn.hasClass('active')) {
            // Добавляем фильтр, если его еще нет
            if (!currentFilters[type].includes(value)) {
                currentFilters[type].push(value);
            }
        } else {
            // Удаляем фильтр
            currentFilters[type] = currentFilters[type].filter(item => item !== value);
        }

        // Здесь можно обновить данные или сделать запрос
        // Триггерим событие изменения фильтров
        $(document).trigger('filtersChanged', [currentFilters]);
    }

    const $filters = $(`
        <section class="py-5">
            <div class="container">
                <div class="filter-card">
                    <h3 class="mb-4">Какое свидание вы ищете?</h3>
                    <div class="row">
                        <div class="col-md-6">
                            <h5 class="mb-3">Тип свидания</h5>
                            <div class="d-flex flex-wrap mb-4">
                                <div class="filter-btn category-romantic" data-type="category" data-value="ROMANTIC">
                                    <i class="fas fa-heart me-2"></i>Романтическое
                                </div>
                                <div class="filter-btn category-active" data-type="category" data-value="ACTIVE">
                                    <i class="fas fa-hiking me-2"></i>Активное
                                </div>
                                <div class="filter-btn category-intellectual" data-type="category" data-value="INTELLECTUAL">
                                    <i class="fas fa-brain me-2"></i>Интеллектуальное
                                </div>
                                <div class="filter-btn category-horror" data-type="category" data-value="HORROR">
                                    <i class="fas fa-ghost me-2"></i>Хоррор
                                </div>
                                <div class="filter-btn category-cozy" data-type="category" data-value="COZY">
                                    <i class="fas fa-mug-hot me-2"></i>Уютное
                                </div>
                                <div class="filter-btn category-mystery" data-type="category" data-value="MYSTERY">
                                    <i class="fas fa-search me-2"></i>Тайна
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h5 class="mb-3">Бюджет</h5>
                            <div class="d-flex flex-wrap mb-4">
                                <div class="filter-btn category-budget" data-type="price" data-value="BUDGET">
                                    <i class="fas fa-wallet me-2"></i>Эконом (до 2,000₽)
                                </div>
                                <div class="filter-btn category-luxury" data-type="price" data-value="LUXURY">
                                    <i class="fas fa-gem me-2"></i>Премиум (от 5,000₽)
                                </div>
                            </div>
        
                            <h5 class="mb-3">Время</h5>
                            <div class="d-flex flex-wrap">
                                <div class="filter-btn" data-type="time" data-value="DAY">
                                    <i class="fas fa-sun me-2"></i>День
                                </div>
                                <div class="filter-btn" data-type="time" data-value="EVENING">
                                    <i class="fas fa-moon me-2"></i>Вечер
                                </div>
                                <div class="filter-btn" data-type="time" data-value="NIGHT">
                                    <i class="fas fa-star me-2"></i>Ночь
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    `);

    // Вешаем один обработчик на все кнопки
    $filters.on('click', '.filter-btn', toggleFilter);

    $filtersContainer.append($filters);
}