import './App.css';
import React, { useState } from "react";

const DEFAULT_PARAMS = {
  "model": "text-davinci-003",
  "temperature": 0,
  "max_tokens": 256,
  "top_p": 1,
  "frequency_penalty": 0,
  "presence_penalty": 0
}

//const SELECTED_PROMPT = "STATELESS"


function App() {

  const [structureState, setStructureState] = useState(
    [] //[{subject: '七里香', relation: '歌手', object: '人物'}]
  );

  const clearState = () => {
    setStructureState([])
  };

  const updateStructure = (update) =>{
    //setStructureState([]); //清理状态值
    //console.log(JSON.parse(JSON.stringify(structureState)));
    var current_structure = JSON.parse(JSON.stringify(structureState));
    if (update.length === 0) {
      console.log("0 output")
      return;
    }

    update.forEach(ut => {
      current_structure.push(ut);
    });
    setStructureState(current_structure);
  }

  const queryREPrompt = (prompt, prompt1, prompt2, prompt3, apiKey) => {
    console.log(lanState);
    var file = '';
    if (lanState.lanValue === 'english') {
      file ='prompts/RE-eng.prompt'
    } else {
      file ='prompts/RE-chi.prompt'
    };
    console.log(file);

    fetch(file)
      .then(response => response.text()) //response转文本->
      .then(curprompt => {
        console.log(curprompt);
        curprompt = curprompt.replace("$prompt", prompt);
        if(prompt1.length === 0){
          console.log("default relation type list");
          if (lanState.lanValue === 'english') {
            curprompt = curprompt.replace("$prompt1", "['location-located_in', 'administrative_division-country', 'person-place_lived', 'person-company', 'person-nationality', 'company-founders', 'country-administrative_divisions', 'person-children', 'country-capital', 'deceased_person-place_of_death', 'neighborhood-neighborhood_of', 'person-place_of_birth']");
          } else {
            curprompt = curprompt.replace("$prompt1", "['所属专辑', '成立日期', '海拔', '官方语言', '占地面积', '父亲', '歌手', '制片人', '导演', '首都', '主演', '董事长', '祖籍', '妻子', '母亲', '气候', '面积', '主角', '邮政编码', '简称', '出品公司', '注册资本', '编剧', '创始人', '毕业院校', '国籍', '专业代码', '朝代', '作者', '作词', '所在城市', '嘉宾', '总部地点', '人口数量', '代言人', '改编自', '校长', '丈夫', '主持人', '主题曲', '修业年限', '作曲', '号', '上映时间', '票房', '饰演', '配音', '获奖']");
          };
        } else{
          curprompt = curprompt.replace("$prompt1", prompt1);
        }

        if(prompt2.length === 0){
          console.log("default subject type list");
          if (lanState.lanValue === 'english') {
            curprompt = curprompt.replace("$prompt2", "['organization', 'person', 'location', 'country']");
          } else {
            curprompt = curprompt.replace("$prompt2", "['国家', '行政区', '文学作品', '人物', '影视作品', '学校', '图书作品', '地点', '历史人物', '景点', '歌曲', '学科专业', '企业', '电视综艺', '机构', '企业/品牌', '娱乐人物']");
          };
        } else{
          curprompt = curprompt.replace("$prompt2", prompt1);
        }

        if(prompt3.length === 0){
          console.log("default object type list");
          if (lanState.lanValue === 'english') {
            curprompt = curprompt.replace("$prompt3", "['person', 'location', 'country', 'organization', 'city']");
          } else {
            curprompt = curprompt.replace("$prompt3", "['国家', '人物', 'Text', 'Date', '地点', '气候', '城市', '歌曲', '企业', 'Number', '音乐专辑', '学校', '作品', '语言']");
          };
        } else{
          curprompt = curprompt.replace("$prompt3", prompt1);
        }

        console.log(curprompt);
        const params = { ...DEFAULT_PARAMS, prompt: curprompt };

        const requestOptions = {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + String(apiKey)
          },
          body: JSON.stringify(params)
        };
        fetch('https://api.openai.com/v1/completions', requestOptions)
          .then(response => {
            if (!response.ok) {
              switch (response.status) {
                case 401: // 401: Unauthorized: API key is wrong
                  throw new Error('Please double-check your API key.');
                case 429: // 429: Too Many Requests: Need to pay
                  throw new Error('You exceeded your current quota, please check your plan and billing details.');
                default:
                  throw new Error('Something went wrong with the request, please check the Network log');
              }
            }
            //console.log(response)
            return response.json();
          })
          .then((response) => {
            const { choices } = response;
            //console.log(choices)
            const text = choices[0].text;
            console.log(text);

            //const updates = JSON.parse(text);
            //console.log(updates);

            //updateGraph(updates);
            const reg = /\(.*?\)/g; //g表示全局搜索，会进行多次match
            var update = text.match(reg);
            if(! update){
              update = [text];
            }
            console.log(update);
            console.log(update[0])
            updateStructure(update);

            //document.getElementsByClassName("searchBar")[0].value = "";
            //document.getElementsByClassName("typeList")[0].value = "";
            document.body.style.cursor = 'default';
            document.getElementsByClassName("generateButton")[0].disabled = false;
          }).catch((error) => {
            console.log(error);
            alert(error);
            document.body.style.cursor = 'default';
            document.getElementsByClassName("generateButton")[0].disabled = false; //出错则释放，为了能再次使用
          });
      })
  };

  const queryNERPrompt = (prompt, prompt1, prompt2, prompt3, apiKey) => {
    console.log(lanState);
    var file = '';
    if (lanState.lanValue === 'english') {
      file ='prompts/NER-eng.prompt'
    } else {
      file ='prompts/NER-chi.prompt'
    };
    console.log(file);

    fetch(file)
      .then(response => response.text()) //response转文本-> curprompt
      .then(curprompt => {
        console.log(curprompt);
        if(prompt1.length === 0){
          console.log("default ner type list");
          if (lanState.lanValue === 'english') {
            curprompt = curprompt.replace("$prompt1", "['LOC', 'MISC', 'ORG', 'PER']");
          } else {
            curprompt = curprompt.replace("$prompt1", "['组织机构', '地点', '人物']");
          };
        } else{
          curprompt = curprompt.replace("$prompt1", prompt1);
        }

        curprompt = curprompt.replace("$prompt", prompt);
        console.log(curprompt);
        const params = { ...DEFAULT_PARAMS, prompt: curprompt };

        const requestOptions = {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + String(apiKey)
          },
          body: JSON.stringify(params)
        };
        fetch('https://api.openai.com/v1/completions', requestOptions)
          .then(response => {
            if (!response.ok) {
              switch (response.status) {
                case 401: // 401: Unauthorized: API key is wrong
                  throw new Error('Please double-check your API key.');
                case 429: // 429: Too Many Requests: Need to pay
                  throw new Error('You exceeded your current quota, please check your plan and billing details.');
                default:
                  throw new Error('Something went wrong with the request, please check the Network log');
              }
            }
            //console.log(response)
            return response.json();
          })
          .then((response) => {
            const { choices } = response;
            //console.log(choices)
            const text = choices[0].text;
            console.log(text);

            //const updates = JSON.parse(text);
            //console.log(updates);

            //updateGraph(updates);
            const reg = /\(.*?\)/g; //g表示全局搜索，会进行多次match
            var update = text.match(reg);
            if(! update){
              update = [text];
            }
            console.log(update);
            console.log(update[0])
            updateStructure(update);

            //document.getElementsByClassName("searchBar")[0].value = "";
            //document.getElementsByClassName("typeList")[0].value = "";
            document.body.style.cursor = 'default';
            document.getElementsByClassName("generateButton")[0].disabled = false;
          }).catch((error) => {
            console.log(error);
            alert(error);
            document.body.style.cursor = 'default';
            document.getElementsByClassName("generateButton")[0].disabled = false; //出错则释放，为了能再次使用
          });
      })
  };

  const queryEEPrompt = (prompt, prompt1, prompt2, prompt3, apiKey) => {
    console.log(lanState);
    var file = '';
    if (lanState.lanValue === 'english') {
      file ='prompts/EE-eng.prompt'
    } else {
      file ='prompts/EE-chi.prompt'
    };
    console.log(file);

    fetch(file)
    .then(response => response.text()) //response转文本-> curprompt
    .then(curprompt => {
      console.log(curprompt);
      if(prompt1.length === 0){
        console.log("default event type list");
        if (lanState.lanValue === 'english') {
          curprompt = curprompt.replace("$prompt1", "{'Personnel:Elect': ['Person', 'Entity', 'Position', 'Time', 'Place'], 'Business:Declare-Bankruptcy': ['Org', 'Time', 'Place'], 'Justice:Arrest-Jail': ['Person', 'Agent', 'Crime', 'Time', 'Place'], 'Life:Divorce': ['Person', 'Time', 'Place'], 'Life:Injure': ['Agent', 'Victim', 'Instrument', 'Time', 'Place']}");
        } else {
          curprompt = curprompt.replace("$prompt1", "{'组织行为-罢工': ['时间', '所属组织', '罢工人数', '罢工人员'], '竞赛行为-晋级': ['时间', '晋级方', '晋级赛事'], '财经/交易-涨停':['时间', '涨停股票'] , '组织关系-解雇': ['时间', '解雇方', '被解雇人员']}");
        };
      } else{
        curprompt = curprompt.replace("$prompt1", prompt1);
      }

      curprompt = curprompt.replace("$prompt", prompt);
      console.log(curprompt);
      const params = { ...DEFAULT_PARAMS, prompt: curprompt };
        const requestOptions = {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + String(apiKey)
          },
          body: JSON.stringify(params)
        };
        fetch('https://api.openai.com/v1/completions', requestOptions)
          .then(response => {
            if (!response.ok) {
              switch (response.status) {
                case 401: // 401: Unauthorized: API key is wrong
                  throw new Error('Please double-check your API key.');
                case 429: // 429: Too Many Requests: Need to pay
                  throw new Error('You exceeded your current quota, please check your plan and billing details.');
                default:
                  throw new Error('Something went wrong with the request, please check the Network log');
              }
            }
            //console.log(response)
            return response.json();
          })
          .then((response) => {
            const { choices } = response;
            //console.log(choices)
            const text = choices[0].text;
            console.log(text);

            //const updates = JSON.parse(text);
            //console.log(updates);

            //updateGraph(updates);
            const reg = /[^,{]+?:[\x20]*\{.*?\}/g; //g表示全局搜索，会进行多次match
            var update = text.match(reg);
            if(! update){
              update = [text];
            }
            console.log(update);
            console.log(update[0])
            updateStructure(update);

            //document.getElementsByClassName("searchBar")[0].value = "";
            //document.getElementsByClassName("typeList")[0].value = "";
            document.body.style.cursor = 'default';
            document.getElementsByClassName("generateButton")[0].disabled = false;
          }).catch((error) => {
            console.log(error);
            alert(error);
            document.body.style.cursor = 'default';
            document.getElementsByClassName("generateButton")[0].disabled = false; //出错则释放，为了能再次使用
          });
      })
  };

  const queryPrompt = (prompt, prompt1, prompt2, prompt3, apiKey) => {
    console.log(taskState.taskValue);
    if (taskState.taskValue === 'RE') {
      queryREPrompt(prompt, prompt1, prompt2, prompt3, apiKey);
    } else if (taskState.taskValue === 'NER') {
      queryNERPrompt(prompt, prompt1, prompt2, prompt3, apiKey);
    } else if (taskState.taskValue === 'EE') {
      queryEEPrompt(prompt, prompt1, prompt2, prompt3, apiKey);
    } else {
      alert("Please select a task");
      document.body.style.cursor = 'default';
      document.getElementsByClassName("generateButton")[0].disabled = false;
    }
  }


  const createIE = () => {
    document.body.style.cursor = 'wait';

    document.getElementsByClassName("generateButton")[0].disabled = true;
    const prompt = document.getElementsByClassName("searchBar")[0].value;
    const prompt1 = document.getElementById("prompt1").value;
    const prompt2 = document.getElementById("prompt2").value;
    const prompt3 = document.getElementById("prompt3").value;
    var apiKey = document.getElementsByClassName("apiKeyTextField")[0].value;
    //console.log(apiKey);
    if (apiKey.length === 0){
      console.log("default open AI key");
      const temp_k = "@WITy9ios86qOmgLcFT3BlbkFJi68ofPwe9IVifL3NYgZ5";
      apiKey = "sk-nd9" + temp_k.substring(1);
      //console.log(apiKey);
    }

    queryPrompt(prompt, prompt1, prompt2, prompt3, apiKey);
  }

  const lists = structureState.map((triplet) =>
    <li key={triplet.toString()}> {triplet}</li>
  );

  // 语言选项
  const [lanState, setLanState] = useState(
    {lanValue: "english"}
  );

  const handleChange = (event) => {
    console.log(event);
    console.log(event.target.value);
    //setLanState({lanValue: event.target.value}, 
    //  () => {console.log(lanState)});
    setLanState({lanValue: event.target.value}); // 坑：set状态后，lanState值不会立即改变，因为react是渲染周期结束后才更新值。
  };

  // 任务选项
  const [taskState, setTaskState] = useState(
    {taskValue: "NER"}
  );

  const handleChange2 = (event) => {
    console.log(event);
    console.log(event.target.value);
    //setLanState({lanValue: event.target.value}, 
    //  () => {console.log(lanState)});
    setTaskState({taskValue: event.target.value}); 
  };

  // <form>能控制radio为一组。
  return (
    <div className='container'>
      <h1 className="headerText">基于民航有噪声数据的NLP处理工具 </h1>
      <p className='subheaderText'>基于民航有噪声数据的NLP处理工具 </p>
      <p className='subheaderText'>工具简介：输入非结构化文本->消除噪声（数据预处理）->无噪声的标准化文本->利用手动枚举的论元关系字典（样例如上）和提示词工程（样例如上），使大模型根据知识图谱里的内容（neo4j和langchain）输出主体（飞机）和要素（行为，地点）（json格式）</p>

      <p className='subheaderText'>我们支持以下功能:</p>
      <div>
      <table>
      <tbody>
      <tr>
          <td>RE</td>
          <td>entity-relation joint extraction</td>
      </tr>
      <tr>
          <td>NER</td>
          <td>named entity recoginzation</td>
      </tr>
      <tr>
          <td>EE</td>
          <td>event extraction</td>
      </tr>
      </tbody>
      </table>
      </div>
      <center>
        <div>
        <form>
        <input type="radio" id="zh" value="chinese" checked={lanState.lanValue === 'chinese'} 
        onChange={handleChange} /> Chinese
          <input type="radio" id="en" value="english" checked={lanState.lanValue === 'english'} 
        onChange={handleChange} /> English
        </form>
        </div>
        <div>
        <form>
        <input type="radio" id="re" value="RE" checked={taskState.taskValue === 'RE'} 
        onChange={handleChange2} /> RE
        <input type="radio" id="ner" value="NER" checked={taskState.taskValue === 'NER'} 
        onChange={handleChange2} /> NER
        <input type="radio" id="ee" value="EE" checked={taskState.taskValue === 'EE'} 
        onChange={handleChange2} /> EE
        </form>
        </div>
        <div className='inputContainer'>
          <input className="searchBar" placeholder="Input sentence..."></input>
          <input className="typeList" id="prompt1" placeholder="relation/ner/event type list;
          like ['nationality']/['LOC']/{'Life:Divorce':['Person','Time','Place']}"></input>
          <input className="typeList" id="prompt2" placeholder="Subject type list... like ['person','location']"></input>
          <input className="typeList" id="prompt3" placeholder="Object type list... like ['country','location']"></input>
          <input className="apiKeyTextField" type="password" placeholder="Enter your OpenAI API key..."></input>
          <button className="generateButton" onClick={createIE}>Generate</button>
          <button className="clearButton" onClick={clearState}>Clear</button>
        </div>
      </center>
      <div className='graphContainer'>
        <ul className='ulC'>{lists}</ul>
      </div>
      <p className='footer'>Tip: you can clear output by clicking Clear button for aesthetics
      <br></br>Note: Except for the mandatory "Input sentence" and "OpenAI API key" fields, other items can be optional.
      <br></br>We set the default relation/entity/event type list; subject type list; object type list. Change the default setting and extract specific information by reset the type lists.</p>
    </div>
  );
}

export default App;