import { getMessageText } from "@/types/ask";
import React from 'react';
import { Text, View } from 'react-native';
import MessageBubble from './MessageBubble';

interface MessageRowProps {
  item: any;
  isUser: boolean;
  setModalVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, data: any }>>;
  setCancel: React.Dispatch<React.SetStateAction<boolean>>;
  cancel: boolean;
  t: any;
  setSelectedImages: React.Dispatch<React.SetStateAction<string[]>>;
  setModalDetailsVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, content: any }>>;
}

const MessageRow = ({
  item,
  isUser,
  setModalVisible,
  setCancel,
  cancel,
  t,
  setSelectedImages,
  setModalDetailsVisible
}: MessageRowProps) => {
  return (
    <View className="w-full" style={{ flexDirection: getMessageText(item) == "keepSearchIng" ? 'row' : 'column', alignItems: getMessageText(item) == "keepSearchIng" ? 'flex-end' : 'flex-start', gap: getMessageText(item) == "keepSearchIng" ? 8 : 0 }}>
      <MessageBubble
        item={item}
        isUser={isUser}
        setModalVisible={setModalVisible}
        setCancel={setCancel}
        cancel={cancel}
        t={t}
        setSelectedImages={setSelectedImages}
        setModalDetailsVisible={setModalDetailsVisible}
      />
      {
        getMessageText(item) == "keepSearchIng"
        &&
        <Text className="text-[#d9d9d9]">
          {t("ask:ask.think")}
        </Text>
      }
    </View>
  );
};

export default React.memo(MessageRow);