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

  observeTabsButtons();
  observeFootnotesLinks();
}

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

  buttons.forEach((button) => {
    button.addEventListener('click', () => {
      toggleActiveTabsButton(button as HTMLElement);
      toggleActiveTabsPanel(button as HTMLElement);
    });
  });
}

function toggleActiveTabsButton(button: HTMLElement): void {
  const buttons = document.querySelectorAll('.index-panel__header button');
  buttons.forEach((button) => {
    button.setAttribute('aria-selected', 'false');
  });
  button.setAttribute('aria-selected', 'true');
}

function toggleActiveTabsPanel(activeButton: HTMLElement): void {
  const dataIndex = activeButton.getAttribute('data-index');
  const activePanel = document.querySelector<HTMLElement>(
    `.index-panel__content > [data-index="${dataIndex}"]`
  );
  if (!dataIndex || !activePanel) 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');
  });

  // Active the button and the panel
  activeButton.setAttribute('aria-selected', 'true');
  activePanel.setAttribute('aria-hidden', 'false');
}

function observeFootnotesLinks(): void {
  const footnotesButtons = document.querySelectorAll('.footnotes-index a');

  footnotesButtons.forEach((footnoteButton) => {
    footnoteButton.addEventListener('click', (e) => {
      e.preventDefault();
      const target = e.target as HTMLElement;
      const targetId = target.getAttribute('href');

      if (!targetId) return;

      document.querySelector(targetId)?.scrollIntoView({ behavior: 'smooth' });
      toggleActiveFootnote(footnoteButton as HTMLElement);
    });
  });
}

function toggleActiveFootnote(button: HTMLElement): void {
  const buttons = document.querySelectorAll('footnote-reference-item');

  const footnotesItems = document.querySelectorAll('.footnote-reference-item');

  footnotesItems.forEach((footnoteItem) => {
    footnoteItem.setAttribute('active', 'false');
  });

  button.setAttribute('active', 'true');
}