import handleChapterProgression, { observeSommaireLinks } from './sommaire';
import { observeFootnotesLinks } from './footnote-format';

export default function handleIndexPanel(): void {
  const indexPanel = document.querySelector('.index-panel');
  if (!indexPanel) return;

  // TABS
  observeTabsButtons();
  // FOOTNOTES
  observeFootnotesLinks();
  // INDEX PANEL MOBILE
  handleMobileOpenToggle();
  // CHAPITRES
  observeSommaireLinks();
  handleChapterProgression();
  handleMobileOpenToggle();
}

function handleMobileOpenToggle(): void {
  const mobileOpenToggle = document.querySelector('#mobile-open-toggle');
  const indexPanel = document.querySelector('.index-panel');
  if (!mobileOpenToggle) return;
  if (!indexPanel) return;

  mobileOpenToggle.addEventListener('click', () => {
    const isMobileOpen = indexPanel.getAttribute('data-mobile-open');

    if (isMobileOpen === 'true') {
      indexPanel.setAttribute('data-mobile-open', 'false');
    } else {
      indexPanel.setAttribute('data-mobile-open', 'true');
    }
  });
}

// HANDLE TABS
function observeTabsButtons(): void {
  const buttons = document.querySelectorAll('.index-panel__header button');

  buttons.forEach((button) => {
    button.addEventListener('click', () => {
      toggleActiveTabPanel(button.getAttribute('data-index') as string);
    });
  });
}

export function toggleActiveTabPanel(dataIndex: string): void {
  const activePanel = document.querySelector<HTMLElement>(
    `.index-panel__content > [data-index="${dataIndex}"]`
  );
  const activeButton = document.querySelector<HTMLElement>(
    `.index-panel__header button[data-index="${dataIndex}"]`
  );
  if (!dataIndex || !activePanel || !activeButton) return;

  // Hide all buttons and panels
  const allButtons = document.querySelectorAll<HTMLElement>('.index-panel__header button');
  const allPanels = document.querySelectorAll<HTMLElement>('.index-panel__content > [data-index]');

  allButtons.forEach((button) => {
    button.setAttribute('aria-selected', 'false');
  });

  allPanels.forEach((panel) => {
    panel.setAttribute('aria-hidden', 'true');
  });

  activeButton.setAttribute('aria-selected', 'true');
  activePanel.setAttribute('aria-hidden', 'false');
}