import { scrollToFootnote } from './footnote-format';
import { handleSmoothScrollToTitle } from './sommaire';

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

  observeTabsButtons();
  observeFootnotesLinks();
  observeSommaireLinks();
}

// 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');
}

// ********************************************************
// ************* SOMMAIRE *********************************
// ********************************************************

function observeSommaireLinks(): void {
  console.log('observeSommaireLinks');
  const sommaireTitles: NodeListOf<Element> = document.querySelectorAll('.sommaire-index li a');
  for (const title of sommaireTitles) {
    title.addEventListener('click', (e) => {
      e.preventDefault();

      const href = title.getAttribute('href');
      if (!href) return;

      const targetId = href.startsWith('#') ? href.substring(1) : href;
      if (!targetId) return;

      handleSmoothScrollToTitle(targetId);
      toggleActiveChapterLinkInIndexPanel(targetId);
    });
  }
}

function handleSmoothScrollToTitle(targetId: string): void {
  const targetElement = document.querySelector(`#${targetId}`);
  if (!targetElement) return;

  targetElement.scrollIntoView({ behavior: 'smooth' });
}
function toggleActiveChapterLinkInIndexPanel(targetId: string): void {
  const sommaireLinks: NodeListOf<Element> = document.querySelectorAll('.sommaire-index li a');

  const indexPanel = document.querySelector('.index-panel') as HTMLElement;
  const currentLink = indexPanel.querySelector(`a[href="#${targetId}"]`) as HTMLElement;

  console.log(currentLink);

  if (!currentLink) return;

  for (const link of sommaireLinks) {
    link.setAttribute('active', 'false');
  }

  currentLink?.setAttribute('active', 'true');
}

// export function handleSmoothScrollToTitle(): void {
//   const sommaireTitles: NodeListOf<Element> = document.querySelectorAll('.sommaire-index li a');
//   for (const title of sommaireTitles) {
//     title.addEventListener('click', (e) => {
//       e.preventDefault();

//       const target = title.getAttribute('href');
//       if (!target) return;

//       const targetElement = document.querySelector(target);
//       if (!targetElement) return;

//       targetElement.scrollIntoView({ behavior: 'smooth' });
//     });
//   }
// }

// ********************************************************
// ************* FOOTNOTES *********************************
// ********************************************************

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

  footnotesLinks.forEach((footnoteLink) => {
    footnoteLink.addEventListener('click', (e) => {
      e.preventDefault();
      const target = e.target as HTMLElement;
      const href = target.getAttribute('href');
      if (!href) return;

      const targetId = href.startsWith('#') ? href.substring(1) : href;
      if (!targetId) return;
      scrollToFootnote(targetId);
      // document.querySelector(`#${targetId}`)?.scrollIntoView({ behavior: 'smooth' });

      toggleActiveFootnoteLinkInIndexPanel(targetId);
      scrollToFootnoteInIndexPanel(targetId);
    });
  });
}

export function toggleActiveFootnoteLinkInIndexPanel(footnoteId: string): void {
  const footnotesIndexLinks = document.querySelectorAll('.footnote-reference-item');
  const indexPanel = document.querySelector('.index-panel') as HTMLElement;
  const currentFootnote = indexPanel.querySelector(`a[href="#${footnoteId}"]`) as HTMLElement;

  footnotesIndexLinks.forEach((footnoteLink) => {
    footnoteLink.setAttribute('active', 'false');
  });

  currentFootnote?.setAttribute('active', 'true');
}

export function scrollToFootnoteInIndexPanel(footnoteId: string): void {
  const footnotesIndex = document.querySelector('#footnotes-index') as HTMLElement;
  const indexPanel = document.querySelector('.index-panel') as HTMLElement;
  const currentFootnote = indexPanel?.querySelector(`a[href="#${footnoteId}"]`) as HTMLElement;

  if (currentFootnote && indexPanel) {
    const containerRect = indexPanel.getBoundingClientRect();
    const elementRect = currentFootnote.getBoundingClientRect();

    const relativeTop = elementRect.top - containerRect.top;
    const scrollTop = indexPanel.scrollTop + relativeTop - 20;

    indexPanel.scrollTo({
      top: scrollTop,
      behavior: 'smooth',
    });
  }
}