// Cloned by Moses Crasto on 18 Nov 2023 from World "Chat with GPT model" by Starter user 
// Please leave this clone trail here

const skyboxURL = "https://backend.blockadelabs.com/api/v1";  // Skybox API endpoint
var skyboxAPIKey = "";  // Your Skybox API key
var pusherChannel;
var pusherEvent;
var pusher;

//Pusher parameters
const pusherAppId = "1713507";
const pusherKey = "8979e09a3dafe1a132a6";
const pusherCluster = "eu";

// Default body is margin 0 and padding 0, give it more whitespace:
$('body').css("margin", "20px");
$('body').css("padding", "20px");

document.write(`
  <h1>Generate with Blockade Labs</h1>
  <br>
  Generate a skybox using the <a href="https://api-documentation.blockadelabs.com/api/">Skybox AI API</a>.
  <br>
  <div id="enterkey">
    Enter API key:
    <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
    <button onclick='setkey();' class=ab-normbutton>Set API key</button>
  </div>

  <div style="width:60vw; background-color:white; border: 1px solid black; margin:20; padding: 20px;">
    <h3>Enter a "prompt"</h3>
    <input style="width:50vw;" id="me" value="new york in the evening">
    <button onclick="sendchat();" class=ab-normbutton>Send</button>
  </div>
  
    <div>
    <h3>Select a style</h3>
    <input type="radio" id="option1" name="toggle" value="3">
    <label>Anime</label>
    <input type="radio" id="option2" name="toggle" value="43">
    <label>Art Mix</label>
    <input type="radio" id="option3" name="toggle" value="31">
    <label>Claymation</label>
    <input type="radio" id="option4" name="toggle" value="35">
    <label>Cyberpunk</label>
    <br>
    <input type="radio" id="option5" name="toggle" value="5">
    <label>Digital Painting</label>
    <input type="radio" id="option6" name="toggle" value="15">
    <label>Interiors</label>
    <input type="radio" id="option7" name="toggle" value="20">
    <label>Kids CGI Animation</label>
    <input type="radio" id="option8" name="toggle" value="24">
    <label>Pen & Ink</label>
    <br>
    <input type="radio" id="option9" name="toggle" value="48">
    <label>Psychedelic Illustration</label>
    <input type="radio" id="option10" name="toggle" value="41">
    <label>Radiant Painting</label>
    <input type="radio" id="option11" name="toggle" value="9">
    <label>Realism</label>
    <input type="radio" id="option12" name="toggle" value="16">
    <label>Sky Dome</label>
    <br>
    <input type="radio" id="option13" name="toggle" value="4">
    <label>Surreal</label>
    <input type="radio" id="option14" name="toggle" value="22">
    <label>Watercolor</label>
  </div>

  <div style="width:60vw; background-color:#ffffcc; border: 1px solid black; margin:20; padding: 20px;">
    <h3 id="status"></h3>
    <div id="them"></div>
  </div>
`);

var theprompt = "";

function setkey() {
  skyboxAPIKey = jQuery("input#apikey").val();
  skyboxAPIKey = skyboxAPIKey.trim();
  $("#enterkey").html("<b> API key has been set. </b>");
}

document.getElementById('me').onkeydown = function (event) { if (event.keyCode == 13) sendchat(); };

function sendchat() {
  theprompt = $("#me").val();
  style = $('input[name="toggle"]:checked').val();
  var thedata = {
    "prompt": theprompt,
    "skybox_style_id" : style
  };

  var thedatastring = JSON.stringify(thedata);
  
  $.ajaxSetup({
     headers: {
         "Content-Type": "application/json",
         "x-api-key": skyboxAPIKey
     }
  });

  $.ajax({
    type: "POST",
    url: skyboxURL + "/skybox",
    data: thedatastring,
    dataType: "json",
    success: function (d, rc) { successfn(d, rc); },
    error: function () { errorfn(); }
  });
}

// Initializing Pusher with app credentials
function initializePusher() {
 pusher = new Pusher(pusherKey, {
    cluster: pusherCluster,
  });
}

function loadPusherLibrary() {
  const script = document.createElement('script');
  script.src = 'https://js.pusher.com/7.0/pusher.min.js';
  script.onload = initializePusher;
  document.head.appendChild(script);
}

loadPusherLibrary();

var a;

function successfn(data, rc) {
  a = data;
  var id = a["id"];

  // Set up Pusher with the received channel and event
  pusherChannel = data.pusher_channel;
  pusherEvent = data.pusher_event;

  // Subscribe to the Pusher channel
  const channel = pusher.subscribe(pusherChannel);

  // Listen for status updates
  channel.bind(pusherEvent, function (data) {
    updateStatus(data.status);
    
    // Check if the status is "complete" or "error" to stop the recursive calls
    if (data.status === "complete" || data.status === "error") {
      return;
    }

    // Continue checking the status after a short delay
    setTimeout(() => {
      checkStatus(id);
    }, 1000);
  });

  // Initial check of the status
  checkStatus(id);
}

function checkStatus(id) {
  // Fetch the latest status using the Skybox API
    $.ajax({
      type: "GET",
      url: `${skyboxURL}/imagine/requests/${id}`,
      success: function (data, rc) { checkStatusSuccess(data, rc); },
      error: function () { checkStatusError(); }
    });
}

function checkStatusSuccess(data, rc) {
  // Update the status
  updateStatus(data.request.status);
  if (data.request.status === "complete") {
    // Process the result or update the UI as needed
    var answer = data.request.file_url;
    $("#them").html(`<img src="${answer}" width="100%">`);
  } else if (data.request.status === "error") {
    // Handle the error
    console.error(data.error_message);
  } else {
    // Continue checking the status after a short delay
    setTimeout(() => {
      checkStatus(data.request.id);
    }, 1000);
  }
}

function checkStatusError() {
  // Handle the error when checking the status
  console.error("Error checking status");
}

function errorfn() {
  if (skyboxAPIKey == "") $("#them").html("<font color=red><b> Enter API key to be able to chat. </b></font>");
  else $("#them").html("<font color=red><b> Unknown error. </b></font>");
}

function updateStatus(status) {
  status = status.charAt(0).toUpperCase() + status.slice(1);
  $("#status").html(`Status: ${status}`);
}