//Referenced from : https://ancientbrain.com/world.php?world=2850716357
const threeScript = document.createElement('script');
    threeScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js';
    document.head.appendChild(threeScript);
document.write(`
    
    <h1>World 2: Drawing World</h1>
<p> <i> Be warned that GPT replies are often completely inaccurate.<br> 
 All LLM systems <a href="https://www.google.com/search?q=llm+hallucination"> "hallucinate"</a>.
 It is how they work. </i> </p>
    <div style="width:60vw; background-color:white;  border: 1px solid black; margin:20; padding: 20px;">
        <h3> Select a Historical Place </h3>
        <select id="historical-place" style="width:50vw;">
            <option value="Pyramids">Pyramids</option>
            <option value="eiffel-tower">Eiffel Tower</option>
            <option value="great-wall">Great Wall of China</option>
            <option value="Statue-of-Liberty">Statue of Liberty</option>
            <option value="Taj-Mahal">Taj Mahal</option>
            <option value="Sydney-Opera House">Sydney Opera House</option>
            <option value="Christ-the-Redeemer">Christ the Redeemer</option>
        </select>
        <button onclick="sendChatWithHistoricalPlace();" class=ab-normbutton > Send </button> 
    </div>

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

    

    <div id="drawing-section" style="width: 60vw; background-color: pink; border: 1px solid black; margin: 20; padding: 20px;">
        <h3>  </h3>
        
    </div>
`);

//Sharjil Dhanani - retrieve api key, temperature, model from local storage
var apikey = localStorage.getItem("apikey");
var temperature = localStorage.getItem("temperature");
var themodel = localStorage.getItem("themodel");
    console.log(temperature)
    console.log(apikey)
    console.log(themodel)

//Sharjil Dhanani - sending prompt with historical place
function sendChatWithHistoricalPlace() {
    var selectedPlace = $("#historical-place").val();
    
    
    
    // Construct the prompt
    var theprompt = `Could you assist me in creating an HTML code block that includes both Three.js and jQuery to generate a ${selectedPlace} using Three.js? in 3D?`;
    //var theprompt=`Could you assist me in creating an HTML code block that includes both p5.js and jQuery to generate a ${selectedPlace} using p5.js?`
    
    // Calling sendchat function
    sendchat(theprompt, apikey, temperature);
}



document.addEventListener("DOMContentLoaded", function () {
    // Enter will also send chat:
    var inputElement = document.getElementById('me');
    if (inputElement) {
        inputElement.onkeydown = function (event) {
            if (event.keyCode == 13) {
                sendchat();
            }
        };
    }
});

//send prompt to API
function sendchat(theprompt, apikey, temperature) {
    var openaiURL = "https://api.openai.com/v1/chat/completions";

    // Construct the request data
    var thedata = {
        "model": themodel,
        "temperature": parseFloat(temperature),
        "messages": [{
            "role": "user",
            "content": theprompt
        }]
    };

    var thedatastring = JSON.stringify(thedata);

    $.ajaxSetup({
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer " + apikey
        }
    });

    // Make the API request
    $.ajax({
        type: "POST",
        url: openaiURL,
        data: thedatastring,
        dataType: "json",
        success: function (data, rc) { successfn(data, rc); },
        error: function () { errorfn(); }
    });
}

function successfn(data, rc) {
    a = data;
    var answer = a["choices"][0].message.content;
    console.log("answer",answer)
    $("#them").append("<p>" + answer + "</p>");

    // Extract the code from the response
    var codeMatch = answer.match(/```([\s\S]*)```/);
    console.log("codematch",codeMatch)
    var generatedCode = codeMatch;

    // Run the extracted code
    if (generatedCode) {
        runReceivedCode(generatedCode);
    }
}

function errorfn() {
    if (apikey == "") $("#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 runReceivedCode(code) {
    
        console.log("run code")
        //? Also, please ensure that the code includes the line <script src="https://threejs.org/build/three.js"></script> for the Three.js library?
        //document.write('<script src="https://threejs.org/build/three.js"></script>');
        // Create a script element for Three.js
        //  var script = document.createElement('script');
        //  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js';
        //  script.src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js";
        //  script.src='https://threejs.org/build/three.js';
        
        //  script.async = true;
        //  script.crossOrigin = 'anonymous'
        // // // Define a callback for when the script is loaded
        //  script.onload = function () {
        // //     // Now that Three.js is loaded, evaluate the received code
        //      eval(code);
        // //     document.head.appendChild(script);
        //  }
        try {
        eval(code);
    } catch (error) {
        console.error("Error executing received code:", error);
        //successfn(data, rc)
    }

}