interface RevueAuthorsResponse {
  html_template: string;
}

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

  hydrateRevueAuthors();
  handleAuthorsButton();
}
function getRevueID(): string | null {
  const revueElement: HTMLElement | null =
    document.querySelector('.page--single-revue');
  if (!revueElement) {
    return null;
  }
  return revueElement.getAttribute('data-revue-id');
}

function handleAuthorsButton(): void {
  const authorsButton: HTMLButtonElement | null =
    document.querySelector('.authors-button');
  if (authorsButton) {
    authorsButton.addEventListener('click', () => {
      hydrateRevueAuthors();
    });
  }
}

async function hydrateRevueAuthors(): Promise<void> {
  const revueID = getRevueID();
  if (!revueID) return;

  try {
    const response = await fetch(
      `/wp-json/dynamiques-datas/v1/build/revue/authors?revue-id=${revueID}`
    );
    if (!response.ok) {
      throw new Error(
        `HTTP error! status: ${response.status}`
      );
    }
    const revueAuthors: RevueAuthorsResponse =
      await response.json();

    const authorsList: HTMLElement | null =
      document.querySelector('.authors-list');
    if (authorsList) {
      authorsList.innerHTML = revueAuthors.html_template;
    }
  } catch (error) {
    console.error(
      'Failed to fetch and hydrate revue authors:',
      error
    );
  }
}