import { ChatSidebar } from "./components/ChatSidebar";
import { Chat } from "./components/Chat";
import { messageStore } from "./store/messageStore";
import { conversationStore } from "./store/conversationStore";
import { httpRequest } from "./utils/request";

// Assets
import banorteLogo from "./assets/banortelogo.png";
import sidebarMaya from "./assets/sidebar_maya_contigo.png";
import brujulaElipse from "./assets/brujula_elipse.png";
import sendIcon from "./assets/chat_maya_boton_enviar.png";
import userAvatar from "./assets/chat_maya_default_avatar.png";
import botAvatar from "./assets/brujula.png";

function App() {
  const { messages, pushMessage } = messageStore();
  const {
    conversationId,
    setConversationId,
    setAssistantName,
    receivingMsg,
    setReceivingMsg,
  } = conversationStore();

  const handleStartConversation = async (
    user: string,
    assistant: string
  ): Promise<string> => {
    const response = await httpRequest("POST", "/v1/conversation", {
      user,
      assistant,
    });
    console.log("Conversation id:", response.conversation_id);
    return response.conversation_id;
  };

  const assistant = "Voz del cliente";

  return (
    <div className="w-screen flex flex-col h-screen min-h-screen scrollbar-none">
      <div className="w-full flex">
        <ChatSidebar
          assistant={assistant}
          logoSrc={banorteLogo}
          sidebarImageSrc={sidebarMaya}
          assistantAvatarSrc={brujulaElipse}
        />
        <Chat
          assistant={assistant}
          messages={messages}
          pushMessage={pushMessage}
          conversationId={conversationId}
          setConversationId={setConversationId}
          setAssistantName={setAssistantName}
          receivingMsg={receivingMsg}
          setReceivingMsg={setReceivingMsg}
          onStartConversation={handleStartConversation}
          sendIcon={sendIcon}
          userAvatar={userAvatar}
          botAvatar={botAvatar}
        />
      </div>
    </div>
  );
}

export default App;