import React, { useState } 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 = process.env.REACT_APP_BACKEND_URL;

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

  function onSend(text) {
    if (inputValue === "") {
      return;
    }
    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;