export function handleArticleToolbar() {
  observeTabsButtons();
}

function observeTabsButtons(): void {
  const toolbarButtons = document.querySelectorAll('#article-toolbar button');

  toolbarButtons.forEach((toolbarButton) => {
    toolbarButton.addEventListener('click', () => {
      const currentTabValue = toolbarButton.getAttribute('data-tab') as string;
      toggleActiveTab(toolbarButton as HTMLElement);
      handleActiveTabContent(currentTabValue as string);
    });
  });
}

function toggleActiveTab(toolbarButton: HTMLElement): void {
  resetActiveToolbarButtons();
  toolbarButton.setAttribute('aria-selected', 'true');
}

function resetActiveToolbarButtons(): void {
  const toolbarButtons = document.querySelectorAll('#article-toolbar button');
  toolbarButtons.forEach((toolbarButton) => {
    toolbarButton.setAttribute('aria-selected', 'false');
  });
}

function handleActiveTabContent(tab: string): void {
  const contentWrapper = document.querySelector('.content-wrapper');
  contentWrapper?.setAttribute('data-active-tab', tab);
  console.log(tab);
}