// import OpenAISVGLogo from './OpenAISVGLogo'
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import arduino from 'react-syntax-highlighter/dist/cjs/languages/hljs/arduino';
import { arduinoLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
import atelierCaveDark from "react-syntax-highlighter/dist/esm/styles/hljs/atelier-cave-dark";
SyntaxHighlighter.registerLanguage('arduino', arduino);

// Primary Chat Window
const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput}) =>
  <section className="chatbox">
      <div className="chat-log">
        {chatLog.map((message, index) => (
          <ChatMessage key={index} message={message} />
        ))}
      </div>
        <div className="chat-input-holder">
      <form className="form" onSubmit={handleSubmit}>
          <input
          rows="1"
          value={chatInput}
          onChange={(e)=> setChatInput(e.target.value)}
          className="chat-input-textarea" ></input>
          <button className="submit" type="submit">Submit</button>
          </form>
        </div>
      </section>

// Individual Chat Message
const ChatMessage = ({ message }) => {
  return (
    <div className={`chat-message ${message.user === "gpt" && "chatgpt"}`}>
    <div className="chat-message-center">
      <div className={`avatar ${message.user === "gpt" && "chatgpt"}`}>
        {message.user === "gpt" ? <img className="ai-logo" src="../assets/images/bot.png" width="30px"/> : <img className="ai-logo" src="../assets/images/user.svg" />}
      </div>
      {/* <div className="message">
        {message.message}
      </div> */}
       {/* <div className="message" dangerouslySetInnerHTML={{ __html: message.message }} /> */}
        {message.user === "gpt" ?  <div className="message"><SyntaxHighlighter className="syntaxhighlight"
          language="react" style={arduinoLight}


        >
         {message.message}
        </SyntaxHighlighter> </div>: <div className="message" dangerouslySetInnerHTML={{ __html: message.message }} />}
    </div>
  </div>
  )
}

export default ChatBox