import { Chat, ChatSidebar } from "@banorte/chat-ui";
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 handleFeedback = async (key: string, rating: string): Promise<void> => {
    await httpRequest("POST", "/v1/feedback", { key, rating });
  };

  const assistant = "Maya" + "ChatEgresos";

  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}
          onFeedback={handleFeedback}
        />
      </div>
    </div>
  );
}

export default App;