const imageGeneratorURL = "https://ai-image-generator3.p.rapidapi.com/generate";

var apiKey = "1f820c7f2bmshe915b717250128cp1affcbjsn881367a8a052";
var promptText = "Nice background wallpaper for mobile";

$('body').css({
  'margin': '20px',
  'padding': '20px',
  'font-family': 'Arial, sans-serif',
  'background-image': 'url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/1512c63e-a44e-48e8-92d6-51d80a43cc1e/dert00m-d9846d6d-82d7-4a40-9970-085a65b67ac4.png)',
  'text-align': 'center',
});

$('#enterKey').css({
  'margin-bottom': '20px',
  'display': 'flex',
  'flex-direction': 'column',
  'align-items': 'center',
});

$('#apiKey').css({
  'width': '40vw',
  'padding': '8px',
  'border': '1px solid #ccc',
  'border-radius': '10px',
  'margin-bottom': '10px',
});

$('.ab-normbutton').css({
  'padding': '10px',
  'font-size': '16px',
  'background-color': '#4CAF50',
  'color': 'white',
  'border': 'none',
  'border-radius': '10px',
  'cursor': 'pointer',
});

$('.ab-normbutton:hover').css({
  'background-color': '#45a049',
});

$('#prompt').css({
  'width': '70vw',
  'padding': '8px',
  'border': '1px solid #ccc',
  'border-radius': '10px',
  'margin-bottom': '20px',
  'margin': '0 auto',
});

document.write(`
  <div id="container" style="background-color: gray; padding: 15px 20px 70px; border-radius: 10px; width: 70%; max-width: 1000px; margin: 250px auto; text-align: center;">

    <h1 style="color: white; margin-bottom: 20px;">Generate Wallpapers!</h1>
    <p style="color: white; margin-bottom: 20px;">Welcome to the Image Generator. Please provide your unique API key to authenticate and initiate the image creation process.</p>
    
    <div id="enterKey" style="margin-bottom: 2em; display: flex; flex-direction: column; align-items: center;">
      <label for="apiKey" style="color: white; margin-bottom: 10px;">API Key:</label>
      <input type="text" style="width: 70%; max-width: 300px; padding: 8px; margin-bottom: 5px; border: 1px solid #ccc; border-radius: 10px; color: black; text-align: center;" maxlength="2000" name="apiKey" id="apiKey" placeholder="Enter your API key here">
      <button onclick="setKey(); generateImage();" class="ab-normbutton" style="padding: 8px 16px; margin-top: 10px; background-color: black; color: white;">Activate API Key</button>
    </div>
    <div id="imageResult"></div>
    <p style="color: white"> Click on image to view in a new tab </p>
    
  </div>
`);




function setKey() {
  var enteredApiKey = $("#apiKey").val().trim();

  if (!enteredApiKey || enteredApiKey.length < 30 || enteredApiKey.length > 80) {
    $("#imageResult").html("<font color='##800000'><b>Please enter a valid API key (between 30 and 80 characters).</b></font>");
    return;
  }

  apiKey = enteredApiKey;
  $("#enterKey").html("<b>API key has been set.</b>");

} // Credit to Mark Humphreys for the setting of API key function.
// https://ancientbrain.com/world.php?world=2850716357

function generateImage() {
  if (!apiKey || !promptText) {
    $("#imageResult").html("<font color='#800000'><b>Please enter both API key and prompt.</b></font>");
    return;
  }

  var requestData = {
    "prompt": promptText,
    "page": 1
  };

$.ajax({
  type: "POST",
  url: imageGeneratorURL,
  data: JSON.stringify(requestData),
  headers: {
    'content-type': 'application/json',
    'X-RapidAPI-Key': apiKey,
    'X-RapidAPI-Host': 'ai-image-generator3.p.rapidapi.com'
  },
  success: function(data, rc) { imageGenerationSuccess(data, rc); },
  error: function(data) { imageGenerationError(data, apiKey); }
});
function imageGenerationError(data, apiKey) {
  if (!apiKey) {
    $("#imageResult").html("<font color='#800000'><b>Please enter an API key.</b></font>");
  } else {
    console.log(data);
    $("#imageResult").html(`<font color='#800000'><b>Error generating image.<br> 
    Error code: ${data["status"]}<br>
    Error Message: ${data["responseJSON"]["message"]}<br>
    API Key: ${apiKey}</b></font>`);
  }
}

}

function imageGenerationSuccess(data, rc) {
  // Assuming that data["results"]["images"] is an array of image URLs
  var images = data["results"]["images"];

  // Select a random image
  var randomImage = getRandomElement(images);

  // Wrap the image with an anchor tag to make it clickable
  var imageHtml = `<a href="${randomImage}" target="_blank"><img src="${randomImage}" alt="Generated Image" style="margin: 20px; max-width: 50%;"></a>`;
  $("#imageResult").html(imageHtml);
}

// Function to get a random element from an array
function getRandomElement(array) {
  return array[Math.floor(Math.random() * array.length)];
}


function imageGenerationError() {
  $("#imageResult").html("<font color='red'><b>Error generating image.</b></font>");
}