console.log("RUNNING WALLET ADS. JS");
/*smooth scrolling*/
// Initialize Lenis
const lenis = new Lenis();

// Use requestAnimationFrame to continuously update the scroll
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);
/*smooth scrolling END*/

/**
 * Handles the dynamic replacement of an image source when a new file is selected.
 * This function sets up event listeners on a button and a hidden file input.
 * Clicking the button triggers the file input. Selecting a file updates the target image.
 *
 * @param {string} buttonAttr - The value of the 'card-button' attribute for the clickable element.
 * @param {string} inputAttr - The value of the 'card-input' attribute for the hidden file input.
 * @param {string} imageAttr - The value of the 'card' attribute for the target image element.
 */
const setupImageUpload = (buttonAttr, inputAttr, imageAttr) => {
  const uploadButton = document.querySelector(`[card-button="${buttonAttr}"]`);
  const fileInput = document.querySelector(`[card-input="${inputAttr}"]`);
  const imageElement = document.querySelector(`[card="${imageAttr}"]`);
  const notiimageElement = document.querySelector(`[card="logo-noti"]`);
  // Ensure all required elements are found before adding listeners
  if (uploadButton && fileInput && imageElement) {
    // 1. When the button is clicked, programmatically click the hidden file input.
    uploadButton.addEventListener("click", () => {
      // console.log("CLICKEd");
      fileInput.click();
    });

    // 2. When a file has been selected in the input field.
    fileInput.addEventListener("change", (event) => {
      // Check if any files were selected
      const file = event.target.files[0];
      if (file) {
        // Create a temporary local URL for the selected file
        const objectURL = URL.createObjectURL(file);
        // 3. Replace the 'src' of the target image element with the new file's URL.
        imageElement.src = objectURL;
        imageElement.srcset = objectURL;
        if (inputAttr === "logo"){
          notiimageElement.src = objectURL;
          notiimageElement.srcset = objectURL;
        }
      }
    });
  }
};

// Initialize the image upload functionality for the logo
setupImageUpload("logo", "logo", "logo");

// Initialize the image upload functionality for the main image
setupImageUpload("cover", "cover", "cover");

/**
 * Handles the generation and display of a QR code based on user input.
 * It listens for typing in a specified input field and updates a target image
 * and a text element accordingly.
 */
const setupQrCodeGenerator = () => {
  const linkInput = document.querySelector('[card-input="link"]');
  const qrImage = document.querySelector('[card="qr"]');
  const linkDisplay = document.querySelector('[card="link"]');

  // Ensure all required elements are found
  if (linkInput && qrImage && linkDisplay) {
    // Create a temporary, off-screen div to generate the QR code into.
    // This prevents disrupting the main document structure.
    const qrGeneratorContainer = document.createElement("div");

    /**
     * Generates a QR code and updates the DOM.
     * @param {string} url - The text/URL to encode in the QR code.
     */
    const createCode = (url) => {
      // The qrcode.js library can error on an empty string, so provide a space if the URL is empty.
      const textToEncode = url.trim() === "" ? " " : url;

      // Clear any previously generated QR code from the temporary container.
      qrGeneratorContainer.innerHTML = "";

      // Generate the new QR code using the qrcode.js library.
      new QRCode(qrGeneratorContainer, {
        text: textToEncode,
        width: 256,
        height: 256,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });

      // The library generates a <canvas> or an <img> element. We need to wait briefly
      // for the element to be created in our temporary container before we can access it.
      setTimeout(() => {
        const canvas = qrGeneratorContainer.querySelector("canvas");
        const img = qrGeneratorContainer.querySelector("img");

        let qrDataURL = "";

        if (canvas) {
          // If a canvas was generated, get its content as a Data URL.
          qrDataURL = canvas.toDataURL();
        } else if (img) {
          // If an image was generated, its 'src' will be the Data URL.
          qrDataURL = img.src;
        }

        if (qrDataURL) {
          // Update the source of the main QR image element.
          qrImage.src = qrDataURL;
        }

        // Update the text display to show the current link.
        linkDisplay.textContent = url;
      }, 50); // A 50ms delay is sufficient for the generation to complete.
    };

    // Add an 'input' event listener to the link field to generate a QR code dynamically as the user types.
    linkInput.addEventListener("input", (event) => {
      createCode(event.target.value);
    });

    // On initial load, generate a QR code for the default value present in the link display div.
    const initialLink = linkDisplay.textContent;
    if (initialLink) {
      createCode(initialLink);
    }
  }
};

// Initialize the QR code functionality.
// This assumes the qrcode.js library has been loaded and `QRCode` is available globally.
setupQrCodeGenerator();

/**
 * This script fetches country data from a JSON file and populates a <select> dropdown
 * with country names and their dialing codes.
 */
document.addEventListener('DOMContentLoaded', () => {

  // Find the select element with the specific attribute 'contact="country"'.
  const countrySelect = document.querySelector('select[contact="country"]');

  // If the select element doesn't exist on the page, log an error and do nothing.
  if (!countrySelect) {
    console.error('Error: Could not find the <select> element with the attribute contact="country".');
    return;
  }

  // The URL of the JSON file containing the country data.
  const apiUrl = 'https://files.tryflowdrive.com/xiKz1fYXo_Country.json';

  // Use the Fetch API to get the data from the URL.
  fetch(apiUrl)
    .then(response => {
      // Check if the network response is successful. If not, throw an error.
      if (!response.ok) {
        throw new Error(`Network response was not ok: ${response.statusText}`);
      }
      // If the response is OK, parse it as JSON.
      return response.json();
    })
    .then(countries => {
      // Add a default, non-selectable option to guide the user.
      const defaultOption = document.createElement('option');
      defaultOption.textContent = '+55';
      defaultOption.value = '+55';
      defaultOption.disabled = true;
      defaultOption.selected = true;
      countrySelect.appendChild(defaultOption);

      // Iterate over each country object in the fetched array.
      countries.forEach(country => {
        // Create a new <option> element for the dropdown.
        const option = document.createElement('option');

        // Set the value of the option to the country's dial_code.
        // This is the value that will be used when the form is submitted.
        option.value = country.dial_code;

        // Set the visible text of the option to a user-friendly format,
        // e.g., "United States (+1)".
        option.textContent = `${country.name} (${country.dial_code})`;

        // Add the newly created option to the select dropdown.
        countrySelect.appendChild(option);
      });
    })
    .catch(error => {
      // If there is any error during the fetch operation, log it to the console.
      console.error('There was a problem fetching the country data:', error);
      // You could also update the UI to show an error message to the user.
      countrySelect.innerHTML = '<option>Failed to load data</option>';
    });
});