document.addEventListener('DOMContentLoaded', () => {

    const buttons = document.querySelectorAll('.sidebar-button'); 

	const accordionHeader = document.querySelector('.help-section__header');
	const accordion = document.querySelector('.help-section');
    
    const elMoreExamplesBtn = document.getElementById('more-examples-btn');

    
    function findKeyByValue(obj, value) {
        return Object.keys(obj).find(key => obj[key] === value);
    }

    
	function setActiveButton(button) {
		
		buttons.forEach(btn => btn.classList.remove('active'));

		
		button.classList.add('active');
    }

    
	function get_and_update(search_text) {
        
        
        const url = `/searchinput/?query=${encodeURIComponent(search_text)}`;

        
        fetch(url, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            },
        })
            .then((response) => {
                if (!response.ok) {
                    throw new Error(`Ошибка сети: ${response.status}`);
                }
                return response.json(); 
            })
            .then((data) => {
                
                const serverdata = data.results;
                
                
                if (Object.prototype.toString.call(serverdata) === "[object Object]") {
                
                    lstBeispiel = serverdata.lstBeispiel;
                    const verb_first = serverdata.verb_first;
                    let sdbtn_id = findKeyByValue(sdbtn_names_db, verb_first); 
                    const currentbtn = document.getElementById(sdbtn_id); 
                    setActiveButton(currentbtn); 
                    
                    updatepage(serverdata);
					
					document.getElementById('search-input').value = '';
                }
    
            });
    }
    
    
    
    
    document.getElementById('new-right-btn').addEventListener('click', () => {

        
        if (icard == lenTopic) {
            icard = 1;
        } else {
            icard += 1; 
        }
        const idbd_next = idbd_first + icard - 1;

        
        const url = `/nextcard/?query=${encodeURIComponent(idbd_next)}`;

        
        fetch(url, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            },
        })
            .then((response) => {
                if (!response.ok) {
                    throw new Error(`Ошибка сети: ${response.status}`);
                }
                return response.json(); 
            })
            .then((data) => {
                
                const serverdata = data.results;
                
                lstBeispiel = serverdata.lstBeispiel;
                
                updatepage(serverdata)
            })

    });

    
    document.getElementById('new-left-btn').addEventListener('click', () => {

        
        if (icard == 1) {
            icard = lenTopic 
        } else {
            icard -= 1; 
        }
        const idbd_next = idbd_first + icard - 1;

        
        const url = `/nextcard/?query=${encodeURIComponent(idbd_next)}`;

        
        fetch(url, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            },
        })
            .then((response) => {
                if (!response.ok) {
                    throw new Error(`Ошибка сети: ${response.status}`);
                }
                return response.json(); 
            })
            .then((data) => {
                
                const serverdata = data.results;
                
                lstBeispiel = serverdata.lstBeispiel;
                
                updatepage(serverdata)
            })

    });

    
    document.getElementById('search-btn').addEventListener('click', () => {

        
        const search_text = document.getElementById('search-input').value;
        
        get_and_update(search_text);

    });


    
    if (elMoreExamplesBtn) { 
        document.getElementById('more-examples-btn').addEventListener('click', () => {
            const newItems_exampl = lstBeispiel;
            
            const elUl_exampl = document.querySelector('.examples ul');
            if (elUl_exampl) {
                
                elUl_exampl.innerHTML = '';
                
                newItems_exampl.forEach(item => {
                    
                    const li = document.createElement('li');
                    
                    li.innerHTML = item;
                    
                    elUl_exampl.appendChild(li);
                });
            }
            elMoreExamplesBtn.style.display = 'none'; 
        });
}

    
   
	
	accordionHeader.addEventListener('click', () => {
		accordion.classList.toggle('active');
	});

});