// Quick and dirty ...

const fetchH5PContentTypeCache = async () => {
    const url = 'https://api.h5p.org/v1/content-types/';
    const uuid = crypto.randomUUID();

    const formData = new FormData();
    formData.append('uuid', uuid);

    try {
      const response = await fetch(url, { method: 'POST', body: formData });

      if (!response.ok) {
        return `Error: HTTP status ${response.status}`;
      }

      const data = await response.json();
        return data.contentTypes;
      }
    catch (error) {
      return `Error fetching content types: ${error.message}`;
    }
  };

  const renderContentTypeList = (contentTypes, output, errors) => {
    output.innerHTML = '';

    if (typeof contentTypes === 'string') {
      errors.innerText = contentTypes;
      return;
    }

    const sortedContentTypes = contentTypes.sort((a, b) => a.title.localeCompare(b.title));

    const listContainer = document.createElement('ul');
    sortedContentTypes.forEach(item => {
      const version = `${item.version.major}.${item.version.minor}.${item.version.patch}`;

      const listItem = document.createElement('li');
      const link = document.createElement('a');
      link.href = '#';
      link.textContent = `${item.title} ${version}`;
      link.addEventListener('click', (event) => {
        errors.classList.add('display-none');
        event.preventDefault();
        downloadH5PContent(item.id, version, errors);
      });
      listItem.appendChild(link);
      listContainer.appendChild(listItem);
    });

    output.appendChild(listContainer);
  };

  const downloadH5PContent = async (machineName, version, errors) => {
    const url = `https://api.h5p.org/v1/content-types/${machineName}`;

    try {
      const response = await fetch(url, { method: 'POST' });

      if (!response.ok) {
        errors.classList.remove('display-none');
        errors.innerText = `HTTP error! Status: ${response.status}`;
        return;
      }

      const blob = await response.blob();
      const downloadUrl = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = downloadUrl;
      a.download = `${machineName}-${version}.h5p`;
      document.body.append(a);
      a.click();
      document.body.removeChild(a);
    }
    catch (error) {
      errors.classList.remove('display-none');
      errors.innerText = `Error downloading content type: ${error.message}`;
    }
  };

  const errors = document.querySelector('#errors');
  const output = document.querySelector('#output');
  fetchH5PContentTypeCache().then((contentTypes) => {
    document.querySelector('#loadingIndicator').classList.add('display-none');
    renderContentTypeList(contentTypes, output, errors);
  });