const openaiEndpoint = 'https://api.openai.com/v1/chat/completions';
var wikiCheckEndpoint = 'https://nli.wmflabs.org/fact_checking_aggregated/?claim=';

const themodel = 'gpt-3.5-turbo';

var apiKey = '';
    const prompt = 'Should we be worried about the rise of artificial intelligence?';

document.write(`
<header>
    <h1>OpenAI Hello World</h1>
</header>

<input type="text" id="apiKeyText" size="60" placeholder="Put Openai API key here">
<button id="submitAPI" type="button">Submit API Key</button>
<p id="isAPIsubmitted"> </p>

<h3> Prompt: Should we be worried about the rise of artificial intelligence? </h3>

<p>GPT Response:
    <span>
        <img src="https://i.pinimg.com/originals/65/ba/48/65ba488626025cff82f091336fbf94bb.gif" width="200" height="180" alt="loading">
    </span>
</p>


<br />
<h1> WikiCheck AI API HelloWorld </h1>

<h3 id="CheckME"> Prompt: Kim Jonghyun is the second president of America </h3>
<p> \n Fact Check:
<br /> 
<span id="TrueOrFalse"> </span>
<br />
<span id="checkedData"> </span></p>

`);


function checkData() {
    console.log("checkData called");
    
    
    
    var dataToCheck = document.getElementById("CheckME").innerHTML;
    console.log(dataToCheck);
    wikiCheckEndpoint += dataToCheck.replace(/ /g, '%20');
    console.log("New HTML:"); console.log(wikiCheckEndpoint)
    
    var data = {
        "claim": dataToCheck
    }
    console.log(data);
    
    
    fetch(wikiCheckEndpoint, {
        method: "GET",
        headers:
        {
            "Content-Type": "application/json",
        },
    })
    .then(response => response.json())
    .then(data => {
        console.log(data);
        var TorF = data.predicted_label;
        console.log(TorF);
        var evidence = data.predicted_evidence;
        console.log(evidence);
        document.getElementById("TrueOrFalse").innerHTML = TorF;
        document.getElementById("checkedData").innerHTML = evidence;
    })
    .catch((error) => {
        console.error('Error:', error);
    });
    
}

checkData();

submitAPI.addEventListener('mouseup', sendchat);

function sendchat()
{
    apiKey = apiKeyText.value;
    console.log("sendchat called with ", apiKey);
    theprompt = prompt;

    apiKeyText.style.display = "none";
    submitAPI.style.display = "none";
    isAPIsubmitted.innerHTML = "Submitted API key"


    var thedata = {
        "model": themodel,
        "temperature": 0.7,
        "messages": [
            {
            "role": "user",
            "content": theprompt
            },
            {
            "role": "system",
            "content": "You are part of a debate team. You are to play the role of devil's advocate. You must disagree with every prompt for the sake of the debate. Do not mention that you are playing devil's advocate. Simply disagree with the prompt."
            }
        ]
    };

    
    fetch(openaiEndpoint, {
        method: "POST",
        headers:
        {
            "Content-Type": "application/json",
            "Authorization": "Bearer " + apiKey
        },
        body: JSON.stringify(thedata)
    })
    .then(response => response.json())
    .then(data => {
        console.log(data);
        var theresponse = data.choices[0].message.content;
        console.log(theresponse);
        document.querySelector('span').innerHTML = theresponse;
    })
    .catch((error) => {
        console.error('Error:', error);
    });
}