import { resolveToolbarActive } from '../router.js';

const ITEMS = [
  { pageId: 'messages-list', label: 'Личные сообщения', icon: '💬' },
  { pageId: 'channels-list', label: 'Каналы', icon: '📢' },
  { pageId: 'network-view', label: 'Связи', icon: '🕸' },
  { pageId: 'notifications-view', label: 'Уведомления', icon: '🔔' },
  { pageId: 'profile-view', label: 'Профиль', icon: '👤' },
];

export function renderToolbar(currentPageId, navigate) {
  const root = document.createElement('nav');
  root.className = 'toolbar';
  const active = resolveToolbarActive(currentPageId);

  ITEMS.forEach((item) => {
    const btn = document.createElement('button');
    const isProfile = item.pageId === 'profile-view';
    btn.className = `toolbar-btn${item.pageId === active ? ' active' : ''}${isProfile ? ' toolbar-btn-profile' : ''}`;
    if (isProfile) {
      btn.innerHTML = `
        <span>${item.icon}</span>
        <span class="toolbar-label-wrap">
          <span>${item.label}</span>
          <span id="toolbar-connection-indicator" class="toolbar-connection-indicator is-unknown">
            <span class="toolbar-connection-text">connected</span>
            <span class="toolbar-connection-dot" aria-hidden="true"></span>
          </span>
        </span>
      `;
    } else {
      btn.innerHTML = `<span>${item.icon}</span><span>${item.label}</span>`;
    }
    btn.addEventListener('click', () => navigate(item.pageId));
    root.append(btn);
  });

  return root;
}