export const ToolbarComponent = {
  init() {
    const toggleBtn = document.getElementById('mobile-toolbar-toggle');
    const controlsBar = document.getElementById('controls-bar');
    const currentModelSpan = document.getElementById('mobile-current-model');
    const modelSelect = document.getElementById('systemPreset');

    if (toggleBtn && controlsBar) {
      // Toggle controls visibility
      toggleBtn.addEventListener('click', () => {
        toggleBtn.classList.toggle('open');
        
        // Directly toggle display style
        if (controlsBar.style.display === 'flex') {
          controlsBar.style.display = 'none';
        } else {
          controlsBar.style.display = 'flex';
        }
      });
        
      // Update current model name when changed
      if (modelSelect && currentModelSpan) {
        const updateModelName = () => {
          const selectedOption = modelSelect.options[modelSelect.selectedIndex];
          currentModelSpan.textContent = selectedOption.text;
        };
        
        modelSelect.addEventListener('change', updateModelName);
        updateModelName(); // Initialize
      }
    }
  },
};