import handleIndexPanel from './index-panel';
import handleFootnoteFormat from './footnote-format';

export default function singles(): void {
  const isSingleRevue: HTMLElement | null = document.querySelector('.page--single-revue');
  const isSingleArticle: HTMLElement | null = document.querySelector('.page--single-articles');
  if (!isSingleRevue && !isSingleArticle) return;

  injectIdToNativeTitles();

  handleIndexPanel();
  handleFootnoteFormat();
  handleCiteButton();
}

function handleCiteButton(): void {
  const citeButton: HTMLElement | null = document.querySelector('.socials-buttons__button--cite');
  const citeReference: HTMLElement | null = document.querySelector('#cite-reference');
  if (!citeButton || !citeReference) return;

  if (!window.isSecureContext) {
    citeButton.setAttribute('disabled', 'true');
    citeButton.setAttribute(
      'title',
      'Vous devez utiliser un navigation sécurisé (https) pour copier la citation'
    );
  }

  citeButton.addEventListener('click', () => {
    const textToCopy = citeReference.textContent;
    if (!textToCopy) return;

    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard
        .writeText(textToCopy)
        .then(() => {
          const notyf = new Notyf({
            duration: 4000,
            ripple: false,
            dismissible: true,
            types: [
              {
                type: 'success',
                icon: {
                  className: 'notyf__icon--success',
                  tagName: 'i',
                },
              },
            ],
            position: {
              x: 'right',
              y: 'top',
            },
          });
          notyf.success(
            'Citation copiée dans le presse-papiers ! <br> Vous pouvez maintenant la coller dans votre document.'
          );
        })
        .catch((err) => {
          console.error('Failed to copy text: ', err);
        });
    }
  });
}

function injectIdToNativeTitles(): void {
  const titles = document.querySelectorAll('.content-area h2, .content-area h3');
  titles.forEach((title) => {
    const titleText = title.textContent || '';
    const slug = titleText
      .toLowerCase()
      .normalize('NFD')
      .replace(/[\u0300-\u036f]/g, '')
      .replace(/\s+/g, '-')
      .replace(/[^\w-]+/g, '');
    title.setAttribute('id', slug);
  });
}