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

var apiKey = "1f820c7f2bmshe915b717250128cp1affcbjsn881367a8a052";
var promptText = "Dublin City University Logo";

$('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;">Stylish Image Generator</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();" class="ab-normbutton" style="padding: 8px 16px; margin-top: 10px; background-color: black; color: white;">Activate API Key</button>
    </div>
    
    <div style="margin-top: 40px; display: flex; flex-direction: column; align-items: center;">
      <label for="prompt" style="color: white; margin-bottom: 10px;">Creative Prompt:</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;" id="prompt" placeholder="Enter a descriptive prompt">
      <button onclick="generateImage();" class="ab-normbutton" style="padding: 8px 16px; margin-top: 10px; background-color: black; color: white;">Generate Image</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() {
  promptText = $("#prompt").val();
  
  if (!apiKey || !promptText) {
    $("#imageResult").html("<font color='#800000'><b>Please enter both API key and prompt.</b></font>");
    return;
  }

// MH edit
console.log ( promptText );


  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"];

  // Display 10 random generated images
  var randomImages = getRandomSubset(images, 12);

  // Wrap each image with an anchor tag to make them clickable
  var imageHtml = randomImages.map(url => `<a href="${url}" target="_blank"><img src="${url}" alt="Generated Image" style="margin: 20px; max-width: 28%;"></a>`).join('');
  $("#imageResult").html(imageHtml);
}



// Function to get a random images from an array.
// https://stackoverflow.com/questions/11935175/sampling-a-random-subset-from-an-array
function getRandomSubset(array, size) {
  var shuffled = array.slice(0);
  var i = array.length;
  var min = i - size;
  var temp;
  var index;

  while (i-- > min) {
    index = Math.floor((i + 1) * Math.random());
    temp = shuffled[index];
    shuffled[index] = shuffled[i];
    shuffled[i] = temp;
  }

  return shuffled.slice(min);
}

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