"use client"
import React, { useEffect, useRef, useState } from "react";
import ConversationFrontend from "../components/ConversationFrontend";
import InputFrontend from "../components/InputFrontend";

const handleMicClick = () => {
  console.log('Mic clicked!');
  // Do something when the mic button is clicked
};


const handleResendClick = () => {
  console.log('Resend button clicked');
  // Handle resend action
};

const handleEditClick = () => {
  console.log('Edit button clicked');
  // Handle edit action
};

const handleCopyClick = () => {
  console.log('Copy button clicked');
  // Handle copy action
};

const InputOutputBackend: React.FC = () => {
    const [accessToken, setAccessToken] = useState("")
    const workerRef = useRef<Worker | null>(null)
    type Message = {
      role: string
      content: string
    }

    const handleSendClick = (message:string) => {
      var system:Message = {role:"system" ,content:"You are a helpful assistant."}

      addMessage("user", message);
      console.log("added User Message")
      
      HandlePostRequest([...messages, { role: "user", content: message }], "phi3.5", system);
    };

    const [messages, setMessages] = useState([
      { role:"assistant", content:'Hello. I\'m Your AI Virtual Assistant' } 
    ]);

    const addMessage = (role:string ,content: string) => {
        setMessages((prevMessages) => [...prevMessages, {role,content}]);
    };



    useEffect(() => {
        workerRef.current = new Worker(new URL("./ProcessAPI.js", import.meta.url))
        workerRef.current.postMessage({})
        workerRef.current.onmessage = (e) => {
            setAccessToken(e.data)
        }
        
        return () => {
            if (workerRef.current) {
                workerRef.current.terminate()
            }
        }
    },[])
        
        const HandlePostRequest = (messages: Message[], ai_model: string, system_prompt: Message) => {
          if (workerRef.current) {
            workerRef.current.postMessage({ functionName: "postRequest", access_token: accessToken, messages: messages, ai_model: ai_model, system_prompt: system_prompt })
            workerRef.current.onmessage = (e) => {
              addMessage("assistant",e.data)
            }
        }
    }
    
    return (
    <div>
      <ConversationFrontend
        messages={messages}
        onResendClick={handleResendClick}
        onEditClick={handleEditClick}
        onCopyClick={handleCopyClick}
      />
      <InputFrontend
        message=""
        onSendClick={handleSendClick}
        onMicClick={handleMicClick}
      />
    </div>
    )
}

export default InputOutputBackend