import React, { useState } from 'react';
import InputFrontend from '../components/InputFrontend';
import ConversationFrontend from '../components/ConversationFrontend';
import { Mistral } from '@mistralai/mistralai';



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 InputBackend: React.FC = () => {
  async function prompt_mistral(model: string, prompt: string, system: string) {
    const apiKey = "m3kZRjN8DRSIo88r8Iti9hmKGWIklrLY";

    const client = new Mistral({ apiKey: apiKey });

    var chatResponse = await client.chat.complete({
      model: model,
      messages: [{ role: 'user', content: prompt }, { role: 'system', content: system, }],
    });

    if (chatResponse && chatResponse.choices && chatResponse.choices.length > 0) {
      if (chatResponse.choices[0].message.content) {
        addMessage('AI: ' + chatResponse.choices[0].message.content);
      }
    } else {
      console.error('Error: Unexpected API response:', chatResponse);
    }
  }

  const handleSendClick = (message: string) => {
    var system = "You are a helpful assistant. The following is the chat history."
    for (let index = 0; index < messages.length; index++) {
      system += messages[index] + " ";
    };

    addMessage('User: ' + message);
    prompt_mistral("mistral-large-latest", message, system)
  };

  const [messages, setMessages] = useState([
    'User: Hello!',
    'AI: Hi there!',
    'User: How are you?',
    'AI: I’m good, thank you!'
  ]);

  const addMessage = (message: string) => {
    setMessages((prevMessages) => [...prevMessages, message]);
  };
  return (
    <div>
      <ConversationFrontend
        messages={messages}
        onResendClick={handleResendClick}
        onEditClick={handleEditClick}
        onCopyClick={handleCopyClick}
      />
      <InputFrontend
        message=""
        onSendClick={handleSendClick}
        onMicClick={handleMicClick}
      />
    </div>
  );
};

export default InputBackend;