import './normal.css';
import './App.css';
import { useState, useEffect } from 'react';
import SideMenu from './SideMenu'
import ChatBox from './ChatBox'
import OpenAIAPI from "react-openai-api";

function App() {

  useEffect(() => {
    getEngines();
  }, [])

  const [chatInput, setChatInput] = useState("");
  const [models, setModels] = useState([]);
  const [temperature, setTemperature] = useState(0.5);
  const [currentModel, setCurrentModel] = useState("text-davinci-003");
  const [chatLog, setChatLog] = useState([{
    user: "gpt",
    message: "Welcome to AI-PRO... How can I help you?"
  }]);

  // clear chats
  function clearChat(){
    setChatLog([]);
  }

  function getEngines(){
    fetch("http://localhost:3080/models")
    .then(res => res.json())
    .then(data => {
      console.log(data.models.data)
      // set models in order alpahbetically
      data.models.data.sort((a, b) => {
        if(a.id < b.id) { return -1; }
        if(a.id > b.id) { return 1; }
        return 0;
      })
      setModels(data.models.data)
    })
  }

  async function handleSubmit(e){
    e.preventDefault();
    let chatLogNew = [...chatLog, { user: "me", message: `${chatInput}`} ]
    setChatInput("");
    setChatLog(chatLogNew)
    // fetch response to the api combining the chat log array of messages and seinding it as a message to localhost:3000 as a post
    const messages = chatLogNew.map((message) => message.message).join("\n")


    // const response = await fetch("http://localhost:3080/", {
    //   method: "POST",
    //   headers: {
    //     "Content-Type": "application/json"
    //   },
    //   body: JSON.stringify({
    //     message: messages,
    //     currentModel,
    //    })
    //   });
    // const data = await response.json();
    // setChatLog([...chatLogNew, { user: "gpt", message: `${data.message}`} ])
    // var scrollToTheBottomChatLog = document.getElementsByClassName("chat-log")[0];
    // scrollToTheBottomChatLog.scrollTop = scrollToTheBottomChatLog.scrollHeight;

    var oHttp = new XMLHttpRequest();
    oHttp.open("POST", "https://api.openai.com/v1/completions");
    oHttp.setRequestHeader("Accept", "application/json");
    oHttp.setRequestHeader("Content-Type", "application/json");
    oHttp.setRequestHeader("Authorization", "Bearer " + "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")

    oHttp.onreadystatechange = function () {
      if (oHttp.readyState === 4) {
        var s = ''
        var oJson = {}
        if (s != "") s += "\n";
        try {
          oJson = JSON.parse(oHttp.responseText);
        } catch (ex) {
          s += "Error: " + ex.message
        }
        if (oJson.error && oJson.error.message) {
          s += "Error: " + oJson.error.message;
        } else if (oJson.choices && oJson.choices[0].text) {
          s = oJson.choices[0].text;
          var a = s.split("?\n");
          if (a.length == 2) {
            s = a[1];
          }
          // if (selLang.value != "en-US") {
          //   var a = s.split("?\n");
          //   if (a.length == 2) {
          //     s = a[1];
          //   }
          // }
          if (s == "") s = "No response";
          console.log('ssssssssssssssssssssss',s);
           var replaceBR= (s.replace(/(?:\r\n|\r|\n)/g, "<br>")).replace(/\r?\n|\r/, "");

          setChatLog([...chatLogNew, { user: "gpt", message: `${replaceBR}`} ]);
        }
      }
    };

    var sModel = currentModel;// "text-davinci-003";
    var iMaxTokens = 100;
    var sUserId = "1";
    var dTemperature =temperature;

    var data = {
      model: sModel,
      prompt: messages,
      max_tokens: iMaxTokens,
      //user: sUserId,
      temperature: dTemperature,
     // frequency_penalty: 0.0, //Number between -2.0 and 2.0  Positive value decrease the model's likelihood to repeat the same line verbatim.
      //presence_penalty: 0.0,  //Number between -2.0 and 2.0. Positive values increase the model's likelihood to talk about new topics.
      //stop: ["#", ";"] //Up to 4 sequences where the API will stop generating further tokens. The returned text will not contain the stop sequence.
    }

    oHttp.send(JSON.stringify(data));;

  }

  function handleTemp(temp) {
    if(temp > 1){
      // setTemperature(1)
    } else if (temp < 0){
      // setTemperature(0)
    } else {
      // setTemperature(temp)
    }

  }

  return (
    <div className="App">
      <SideMenu
        currentModel={currentModel}
        setCurrentModel={setCurrentModel}
        models={models}
        setTemperature={handleTemp}
        temperature={temperature}
        clearChat={clearChat}
      />
      <ChatBox
        chatInput={chatInput}
        chatLog={chatLog}
        setChatInput={setChatInput}
        handleSubmit={handleSubmit} />
    </div>
  );
}


export default App;