import {
  scrollToFootnoteInIndexPanel,
  toggleActiveTabPanel,
  toggleActiveFootnoteLinkInIndexPanel,
} from './index-panel';

export default function handleFootnoteFormat(): void {
  const footnotes = document.querySelectorAll('.content-area .footnote-reference');

  footnotes.forEach((footnote) => {
    const footnoteId = footnote.getAttribute('id');
    if (!footnoteId) return;

    footnote.addEventListener('click', () => {
      toggleActiveTabPanel('footnotes');
      scrollToFootnoteInIndexPanel(footnoteId);
      toggleActiveFootnoteLinkInIndexPanel(footnoteId);
    });
  });
}

export function scrollToFootnote(footnoteId: string): void {
  const footnote = document.querySelector(`a.footnote-reference#${footnoteId}`);
  if (!footnote) return;

  footnote.scrollIntoView({ behavior: 'smooth' });
}