import React, { useState, useEffect } from "react";
import { ScrollView, Text, TouchableHighlight, View } from "react-native";
import { useNavigation, Route } from "@react-navigation/native";
import { Conversation, Message } from "@/app/lib/conversation";
import MessageBubble from "@/components/ui/MessageBubble";
import { WhisperContext } from "whisper.rn";
import { NavigationProp, ParamListBase } from "@react-navigation/native";
import { CachedTranslator, LanguageServer } from "@/app/i18n/api";
import { getDb } from "@/app/lib/db";
import LiveAudioStream from "react-native-live-audio-stream";

const lasOptions = {
  sampleRate: 32000, // default is 44100 but 32000 is adequate for accurate voice recognition
  channels: 1, // 1 or 2, default 1
  bitsPerSample: 16, // 8 or 16, default 16
  audioSource: 6, // android only (see below)
  bufferSize: 4096, // default is 2048
};
// LiveAudioStream.init(lasOptions as any);

const ConversationThread = ({ route } : {route?: Route<"Conversation", {conversation : Conversation}>}) => {
  const navigation = useNavigation();
  
  if (!route) {
    return (<View><Text>Missing Params!</Text></View>)
  }

  /* 2. Get the param */
  const { conversation } = route?.params;

  const [messages, setMessages] = useState<Message[]>([]);
  const [guestSpeak, setGuestSpeak] = useState<string | undefined>();
  const [guestSpeakLoaded, setGuestSpeakLoaded] = useState<boolean>(false);
  const [cachedTranslator, setCachedTranslator] = useState<
    undefined | CachedTranslator
  >();

  useEffect(() => {
    (async () => {
      setCachedTranslator(
        new CachedTranslator(
          "en",
          conversation.guest.language,
          await LanguageServer.getDefault()
        )
      );
      if (!cachedTranslator) throw new Error("cachedTranslator is undefined");
      setGuestSpeak(await cachedTranslator.translate("Speak"));
    })();
    const updateMessages = (c: Conversation) => {
      setMessages([...c]);
    };

    conversation.onAddMessage = updateMessages;
    conversation.onTranslationDone = updateMessages;

    return () => {
      conversation.onAddMessage = undefined;
      conversation.onTranslationDone = undefined;
    };
  }, [conversation, guestSpeak]);

  const renderMessages = () =>
    messages.map((message, index) => (
      <MessageBubble key={index} message={message} />
    ));

  return cachedTranslator ? (
    <View style={{ flex: 1, flexDirection: "column" }}>
      <ScrollView
        style={{
          borderColor: "black",
          borderWidth: 1,
          borderStyle: "solid",
          height: "90%",
        }}
      >
        {renderMessages()}
      </ScrollView>
      <View style={{ alignSelf: "center", flexDirection: "row" }}>
        <TouchableHighlight
          style={{ backgroundColor: "blue", padding: 3, borderRadius: 5 }}
        >
          <Text style={{ color: "white", fontSize: 30 }}>Speak</Text>
        </TouchableHighlight>
        <TouchableHighlight
          style={{ backgroundColor: "gray", padding: 3, borderRadius: 5 }}
          onPress={navigation.goBack}
        >
          <Text style={{ color: "white", fontSize: 30 }}>Go Back</Text>
        </TouchableHighlight>
        <TouchableHighlight
          style={{ backgroundColor: "blue", padding: 3, borderRadius: 5 }}
        >
          <Text style={{ color: "white", fontSize: 30 }}>
            {guestSpeak ? guestSpeak : "Speak"}
          </Text>
        </TouchableHighlight>
      </View>
    </View>
  ) : (
    <View>
      <Text>Loading...</Text>
    </View>
  );
};

export default ConversationThread;