//variables for message and the API key
var API_KEY = "";
var message = "";

//function to send message
async function getMessage() {
    theprompt = $("#message").val();//the prompt is the input value
    const options = {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${API_KEY}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            model: "gpt-3.5-turbo",
            temperature: 0.7,
            messages: [{role:"user",content:theprompt}],
            max_tokens: 100
        })
    };
    try{
        const response = await fetch('https://api.openai.com/v1/chat/completions', options);
        const data = await  response.json();//wait for the response
        output.textContent = data.choices[0].message.content; //display the output
        if(data.choices[0].message.content){//if there are choices
            var pElement = document.createElement('p');//create p tag
            const bElement = document.createElement('br');//create br tag
            pElement = theprompt;//set the pElement to be the prompt
            h.append(bElement,pElement);//appending input to the history
        }
    }catch (error){
        console.error(error);
    }
}
//test function to test adding to thhe history
/*function test(){
    theprompt = $("#message").val();
    var pElement = document.createElement('p');
    const bElement = document.createElement('br');
    pElement = theprompt;
    h.append(bElement,pElement);
    
}*/
//to get a fun message
async function getFunMessage() {
    const options = {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${API_KEY}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            model: "gpt-3.5-turbo",
            messages: [{role:"user",content:"give me a fun quote"}],//setting a message 
            max_tokens: 100
        })
    };
    try{
        const response = await fetch('https://api.openai.com/v1/chat/completions', options);
        const data = await  response.json()
        output.textContent = data.choices[0].message.content;
    }catch (error){
        console.error(error);
    }
}

function setapikey()//setting the api key          
{
	API_KEY =  jQuery("input#apikey").val();
	API_KEY = API_KEY.trim();
	
	if (jQuery("input#apikey").val() === ""){$("#enterkey").html ( "<b> Need API KEY. </b><br> Please Reload Page" );}
	else{
	$("#enterkey").html ( "<b> API key has been set. </b>" );}
}


//this is to load the page when you run the world 
document.write(`
    <style>
        h1 {text-align:center;}
        
        body {margin:20px;}
        body {padding:20px;position:relative;}
        #entermessage{
            text-align:center;
            position:absolute;
            bottom:70px;
            width:100%;

        }
        #enterfunmessage {
            text-align:center;
            position:absolute;
            bottom:10px;
            width:100%;
        }
        #reply{
            text-align:center;
            bottom:190px;
            left:0;
            right:0;
            margin:auto;
            width:50%;
            border-style:outset;
            position:absolute;
            
        }
        #output{
            padding:10px;
        }
        #enterkey{
            text-align:center;
        }
        #message{

            left:0;
            right:0;
            margin:auto;
            width:20%;
            border-style:outset;
            position:absolute; 
        }
        #h{
            text-align:center;
            border-style:outset;
            padding:10px;
            width:170px;
            height:500px;
            overflow-x:hidden;
            overflow-y:auto;
            
        }
    </style>


    <h1>SAYING HELLO TO THE API</h1><br>
    <div id=enterkey>
    Enter your PRIVATE API key: <br>
    	<input NAME="apikey" id="apikey" VALUE='' >  
    	<button style="padding:5px; border-radius: 50%;" onclick='setapikey();'  class=ab-normbutton >Set key</button>
    </div>
    <br>
    <br>
    
    <div id=reply>
    <p> The Output: </p>
    <p id=output ></p>
    </div>
    
    <div id=entermessage>
        To test the API, say anything to Chatgpt and watch its response :)<br><br>
    	<input NAME="message"  onfocus="this.value=''"  id="message" VALUE='' > <br> <br>
    	<button style="padding:5px; border-radius: 50%;" onclick='getMessage();'  class=ab-normbutton >Send Message</button>
    	
    </div>
    
    <div id=h>
        <p id=history>
    </div>
    <div id=enterfunmessage>
        
        <button style="padding:5px; border-radius: 50%;"onclick='getFunMessage();'  class=ab-normbutton >Try Me</button>
    </div>
    

    `)