import { Controller } from 'stimulus';
const helper = require("./../components/helper.js");

/*
 * Контроллер для динамического обновления списка специализаций
 * при изменении фильтра "Детский врач" / "Взрослый врач"
 */
export default class extends Controller {
    connect() {
        const kinderSelect = this.element.querySelector('[id*="kinder"]');
        const departmentSelect = this.element.querySelector('[id*="department"]');
        
        if (!kinderSelect || !departmentSelect) {
            return;
        }
        
        // Сохраняем ссылку на departmentSelect для использования в методах
        this.departmentSelect = departmentSelect;
        
        // Обработчик изменения поля kinder
        // Используем событие change от bootstrap-select, если оно доступно
        const handleKinderChange = () => {
            // Небольшая задержка, чтобы bootstrap-select успел обновить значение
            setTimeout(() => {
                const kinderValue = kinderSelect.value || '';
                console.log('Kinder changed to:', kinderValue);
                this.updateDepartments(departmentSelect, kinderValue);
            }, 100);
        };
        
        // Подписываемся на событие change
        kinderSelect.addEventListener('change', handleKinderChange);
        
        // Также подписываемся на событие от bootstrap-select, если оно есть
        if (typeof $ !== 'undefined' && $(kinderSelect).data('selectpicker')) {
            $(kinderSelect).on('changed.bs.select', handleKinderChange);
        }
    }
    
    updateDepartments(departmentSelect, kinderValue) {
        const kinder = kinderValue === '1' ? 1 : null;
        
        // Сохраняем текущее выбранное значение перед обновлением
        const selectedValue = departmentSelect.value;
        
        // Показываем индикатор загрузки
        const originalHtml = departmentSelect.innerHTML;
        departmentSelect.disabled = true;
        
        // Сохраняем состояние bootstrap-select
        const isSelectpicker = typeof $ !== 'undefined' && $(departmentSelect).data('selectpicker');
        const hasLiveSearch = departmentSelect.hasAttribute('data-live-search');
        
        // Уничтожаем selectpicker, если он инициализирован
        if (isSelectpicker) {
            try {
                $(departmentSelect).selectpicker('destroy');
                // Удаляем data-атрибут, чтобы selectpicker_controller не пытался его инициализировать снова
                $(departmentSelect).removeData('selectpicker');
                // Удаляем классы и элементы, которые мог создать selectpicker
                $(departmentSelect).next('.bootstrap-select').remove();
            } catch (e) {
                console.warn('Ошибка при уничтожении selectpicker:', e);
            }
        }
        
        departmentSelect.innerHTML = '<option value="">Загрузка...</option>';
        
        // Получаем список специализаций через API
        const data = {
            kinder: kinder || 0
        };
        
        helper.sendRequest(data, "/api/departments", "GET").then((response) => {
            console.log('API Response:', response);
            
            // Очищаем текущие опции
            departmentSelect.innerHTML = '';
            
            // Добавляем placeholder
            const placeholderOption = document.createElement('option');
            placeholderOption.value = '';
            placeholderOption.textContent = 'Все специализации';
            departmentSelect.appendChild(placeholderOption);
            
            // Добавляем новые опции
            let foundSelected = false;
            if (response && response.data && Array.isArray(response.data)) {
                if (response.data.length > 0) {
                    console.log('Добавляем', response.data.length, 'специализаций');
                    response.data.forEach((dept) => {
                        const option = document.createElement('option');
                        option.value = String(dept.did);
                        option.textContent = dept.name;
                        
                        // Проверяем, есть ли ранее выбранное значение в новом списке
                        if (selectedValue && selectedValue === String(dept.did)) {
                            option.selected = true;
                            foundSelected = true;
                        }
                        
                        departmentSelect.appendChild(option);
                    });
                    console.log('Опции добавлены, всего опций:', departmentSelect.options.length);
                } else {
                    console.warn('Нет данных о специализациях - пустой массив');
                }
            } else {
                console.error('Неверный формат ответа от API:', response);
            }
            
            // Если ранее выбранное значение не найдено в новом списке, сбрасываем выбор
            if (selectedValue && !foundSelected) {
                departmentSelect.value = '';
            }
            
            // Проверяем, что опции действительно добавлены
            console.log('Проверка перед инициализацией selectpicker:');
            console.log('- Количество опций в select:', departmentSelect.options.length);
            console.log('- HTML select:', departmentSelect.outerHTML.substring(0, 200));
            
            // Восстанавливаем bootstrap-select
            // Используем setTimeout для гарантии, что DOM обновлен
            setTimeout(() => {
                try {
                    if (typeof $ !== 'undefined' && $(departmentSelect).length > 0) {
                        // Проверяем, что опции все еще есть
                        if (departmentSelect.options.length === 0) {
                            console.error('ОШИБКА: Опции не найдены перед инициализацией selectpicker!');
                            return;
                        }
                        
                        // Убеждаемся, что старый selectpicker полностью удален
                        const $select = $(departmentSelect);
                        if ($select.data('selectpicker')) {
                            console.log('Найден старый selectpicker, уничтожаем');
                            try {
                                $select.selectpicker('destroy');
                            } catch (e) {
                                console.warn('Ошибка при destroy:', e);
                            }
                        }
                        
                        // Удаляем все элементы bootstrap-select из DOM
                        $select.next('.bootstrap-select').remove();
                        $select.siblings('.bootstrap-select').remove();
                        
                        // Удаляем data-атрибуты
                        $select.removeData('selectpicker');
                        
                        // Всегда инициализируем заново
                        const selectpickerOptions = {
                            noneSelectedText: 'Все специализации'
                        };
                        
                        // Добавляем liveSearch, если он был изначально
                        if (hasLiveSearch) {
                            selectpickerOptions.liveSearch = true;
                        }
                        
                        console.log('Инициализируем selectpicker с опциями:', selectpickerOptions);
                        console.log('Количество опций перед инициализацией:', departmentSelect.options.length);
                        
                        // Инициализируем selectpicker
                        $select.selectpicker(selectpickerOptions);
                        
                        // Проверяем, что selectpicker инициализирован
                        if ($select.data('selectpicker')) {
                            console.log('Selectpicker успешно инициализирован');
                            // Принудительно обновляем отображение
                            $select.selectpicker('render');
                            console.log('Selectpicker отрендерен');
                        } else {
                            console.error('ОШИБКА: Selectpicker не инициализирован после вызова!');
                        }
                    } else {
                        console.error('jQuery не доступен или элемент не найден');
                    }
                } catch (e) {
                    console.error('Ошибка при инициализации bootstrap-select:', e);
                    console.error('Stack trace:', e.stack);
                }
            }, 200);
            
            departmentSelect.disabled = false;
        }).catch((error) => {
            console.error('Ошибка при загрузке специализаций:', error);
            departmentSelect.innerHTML = originalHtml;
            departmentSelect.disabled = false;
            
            // Восстанавливаем bootstrap-select даже при ошибке
            setTimeout(() => {
                if (typeof $ !== 'undefined') {
                    const selectpickerOptions = {
                        noneSelectedText: 'Все специализации'
                    };
                    if (hasLiveSearch) {
                        selectpickerOptions.liveSearch = true;
                    }
                    $(departmentSelect).selectpicker(selectpickerOptions);
                }
            }, 150);
        });
    }
}
