import React, { useState, useEffect, useRef } from "react";
import "./style.css";
import ChatBoxMessages from "./ChatMessages.js";

const ChatBoxProps = (props) => {
  const { visible, updateNeedForm, messages, updateMessages } = props.props;
  const [inputValue, setInputValue] = useState("");
  const backendUrl = '/api';//process.env.REACT_APP_BACKEND_URL+'/api';
  const [clicked, setClicked] = useState(false);
  const [timer, setTimer] = useState(0);
  const [first, setFirst] = useState(true);
  const tick = useRef()
  
  
  useEffect(() => {
    if (first){
      fetch(backendUrl + '/predict', {
            method: 'POST',
            body: JSON.stringify({ message: "<HELP_ON_START>" }),
            mode: 'cors',
            headers: {
           'Content-Type': 'application/json'
           },
      }).then(r => r.json()).then(r => {
      let msg2 = { name: "Sam", message: r.answer, query: "", cand: "", history: "", modQuery: ""};
      updateMessages(msg2);
      }).catch((error) => {
        console.error('Error:', error);
        setInputValue("");
      });
      
      setFirst((first) => false);
    }
    if(!clicked){
      tick.current = setInterval(() => {  
        setTimer((timer) => timer + 1);
      }, 1000);

      if(timer >= 300){
        fetch(backendUrl + '/predict', {
            method: 'POST',
            body: JSON.stringify({ message: "<RECOMMEND_ON_IDLE>" }),
            mode: 'cors',
            headers: {
           'Content-Type': 'application/json'
           },
      }).then(r => r.json()).then(r => {
      let msg2 = { name: "Sam", message: r.answer, query: "", cand: "", history: "", modQuery: ""};
      updateMessages(msg2);
      }).catch((error) => {
        console.error('Error:', error);
        setInputValue("");
      });
      
        setTimer((timer) => 0);
        clearInterval(tick.current);
      }
    }
    else {
      setTimer((timer) => 0);
      setClicked((clicked) => false);
      clearInterval(tick.current);
    }
    return () => clearInterval(tick.current);
  }, [clicked, timer, first]);

  
  function handleKeyDown(event) {
    if (event.key === "Enter") {
      onSend(inputValue);
    }
  }

  function onSend(text) {
    if (inputValue === "") {
      return;
    }
    setClicked((clicked) => true);
    let msg1 = { name: "User", message: inputValue };
    updateMessages(msg1);
    //setMessages((prevMessages) => [msg1, ...prevMessages]);
    /*let msg2 = {
      name: "Sam",
      message: "response" + inputValue,
      query: "query" + inputValue,
      history: messages,
      modQuery: inputValue
    };*/
    //let msg2 = { name: "Sam", message: inputValue};
    //setMessages((prevMessages) => [msg2, ...prevMessages]);
    //updateMessages(msg2)
    //setInputValue("");
    //updateNeedForm(true);

    //setMessages([msg2, ...messages]);
    fetch(backendUrl + '/predict', {
      method: 'POST',
      body: JSON.stringify({ message: inputValue }),
      mode: 'cors',
      headers: {
        'Content-Type': 'application/json'
      },
    })
    .then(r => r.json())
    .then(r => {
      let msg2 = { name: "Sam", message: r.answer, query: r.query, cand: r.cand, history: r.history, modQuery: r.modQuery};
      //setMessages((prevMessages) => [msg2, ...prevMessages]);
      updateMessages(msg2);
      setInputValue("");
      updateNeedForm(true);
      setInputValue("");
    }).catch((error) => {
      console.error('Error:', error);
      setInputValue("");
    });
  }

  function handleInputChange(event) {
    setInputValue(event.target.value);
  }

  return (
    <div
      className="chatbox__support"
      style={{
        ...{ opacity: visible ? "1" : "0" },
        ...{ zIndex: visible ? "123456" : "-123456" },
        ...{
          transform: visible ? "translateY(-40px)" : "translateY(0px)"
        }
      }}
    >
      <div className="chatbox__header">
        <div className="chatbox__image--header">
          <img
            src="https://img.icons8.com/color/48/000000/circled-user-female-skin-type-5--v1.png"
            alt=""
          />
        </div>
        <div className="chatbox__content--header">
          <h4 className="chatbox__heading--header">Janet</h4>
          <p className="chatbox__description--header">
            Hi, it's Janet. I am here to help you in utilizing the VRE.
          </p>
        </div>
      </div>
      <ChatBoxMessages messages={messages} />
      <div className="chatbox__footer">
        <input
          type="text"
          placeholder="Write a message..."
          value={inputValue}
          onChange={handleInputChange}
          onKeyDown={handleKeyDown}
        />
        <button className="chatbox__send--footer send__button" onClick={onSend}>
          Send
        </button>
      </div>
    </div>
  );
};

export default ChatBoxProps;