import './normal.css';
import './App.css';
import './color_theme_1.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.7);
  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)
    })

    // var myHeaders = new Headers();
    // myHeaders.append("Authorization", "Bearer " + "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");

    // var requestOptions = {
    //   method: 'GET',
    //   headers: myHeaders,
    //   redirect: 'follow'
    // };

    // fetch("https://api.openai.com/v1/models", requestOptions)

    //   .then(res => res.json())
    //   .then(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)
    //   })//.catch(error => console.log('error', error));
  }

  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) {
        console.log("11111", oHttp.responseText);
        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>"));
          // // console.log('replaceBR replaceBR', replaceBR);
          // //var replaceBR = (s.replace(/(?:\r\n|\r|\n)/g, "<br>")).replace(/\r?\n|\r/, "");

          // var newStr  = replaceBR.replace(/^(<br>)+/,"");
          // var newStr11  = newStr.replace(/<br><br>/g,"<br>");
          // setChatLog([...chatLogNew, { user: "gpt", message: `${s}` }]);
          // setChatLog([...chatLogNew, { user: "gpt", message: `${replaceBR}`} ]);
        }
      }
    };

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

    var data1 = {
      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.
      stop:["\"\"\""]
    }

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

  }

  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} />
        {/*
        <CopyBlock
            text={ chatLog.map((message, index) => (
              <>
              {message.message}
              </>
            ))}
            language="text"
            showLineNumbers={true}
            theme={dracula}
            codeBlock
          /> */}
    </div>
  );
}


export default App;