import { TatumSDK, Network, Ethereum } from "https://esm.sh/@tatumio/tatum";

document.addEventListener("DOMContentLoaded", async () => {
  const tatum = await TatumSDK.init<Ethereum>({ network: Network.ETHEREUM });
  const addressInput = document.getElementById('address');
  const balanceContainer = document.getElementById('balance-container');
  const totalNFTs = document.getElementById('total-nfts');

  // Function to fetch and display NFTs
  const fetchAndDisplayNFTs = async () => {
    try {
      // Fetch NFTs in the collection
      const balance = await tatum.nft.getNftsInCollection({
        collectionAddress: [addressInput.value],
      });

      // Display the total number of NFTs found
      totalNFTs.textContent = `Total Number of NFTs Found: ${balance.data.length}`;

      // Sort the array so NFTs without metadata images are at the end
      const sortedBalanceData = balance.data.sort((a, b) => (b.metadata && b.metadata.image) ? 1 : -1);

      // Remove previous entries
      balanceContainer.innerHTML = '';

      // Create a new entry for each NFT
      sortedBalanceData.forEach(nft => {
        const entry = document.createElement('div');
        const image = document.createElement('img');
        const name = document.createElement('p');
        
        // Create a new Image object
        const imgObj = new Image();

        // Set a loading image
        image.src = 'https://loading.io/spinners/dual-ring/lg.dual-ring-loader.gif'; // Use any loading image or gif you prefer

        imgObj.onload = function() {
          // Once the image is loaded, replace the source of the image element
          image.src = imgObj.src;
        }

        imgObj.onerror = function() {
          // If there is an error loading the image, replace the source with the unavailable image
          image.src = 'https://user-images.githubusercontent.com/10515204/56117400-9a911800-5f85-11e9-878b-3f998609a6c8.jpg';
        }

        // If there is a metadata image, load the image
        if (nft.metadata && nft.metadata.image) {
          imgObj.src = nft.metadata.image;
        } else {
          // If there is no metadata image, set the image as not available
          image.src = 'https://user-images.githubusercontent.com/10515204/56117400-9a911800-5f85-11e9-878b-3f998609a6c8.jpg';
        }

        // If there is a metadata name, use it. Otherwise, use 'Name not given'
        name.textContent = nft.metadata && nft.metadata.name ? nft.metadata.name : 'Name not given';
        
        entry.appendChild(image);
        entry.appendChild(name);
        balanceContainer.appendChild(entry);
      });
    } catch (error) {
      console.error("Error fetching NFTs:", error);
      // Handle errors here
    }
  };

  // Initial call to fetch and display NFTs
  fetchAndDisplayNFTs();

  // Add event listener to the button
  const button = document.getElementById("check-balance");
  button.addEventListener("click", fetchAndDisplayNFTs);
});