import { View, Text } from "react-native";
import React, { useState, useCallback, useEffect } from "react";
import { Bubble } from "react-native-gifted-chat";
import { useTailwind } from "tailwind-rn";
import "dayjs/locale/zh-cn";
import {
  GestureHandlerRootView,
  TouchableOpacity,
} from "react-native-gesture-handler";
import AutoAnswerBtn from "../AutoAnswerBtn";
export default function OwnBubble({
  navigation,
  route,
  onSend,
  currentMessage,
  ...props
}) {
  const tailwind = useTailwind();
  const [currentHeight, setCurrentHeight] = useState(null);
  return (
    <Bubble
      {...props}
      height={currentHeight}
      wrapperStyle={{
        left: {
          ...tailwind("bg-white p-1"),
          minHeight: currentHeight,
          //   width: 100,
          flexShrink: 1,
          flexGrow: 0,
          //   position: "relative", // 避免 absolute
          overflow: "hidden", // 允许内容溢出
          // justifyContent: "center",
          //   height: "auto",
        },
        right: {
          ...tailwind("p-1"),
          // minHeight: currentHeight,
        },
      }}
      currentMessage={{
        ...currentMessage,
        text:
          currentMessage.mType === 1 ? (
            <View
              style={{ flexShrink: 1 }} // 防止内容被挤压
              onLayout={(event) => {
                const { height } = event.nativeEvent.layout;
                // 如果内容高度超过最小高度，动态更新气泡高度（可选）
                // console.log("气泡高度:", height, currentMessage._id);
                // 设置气泡的高度
                // props.onLayout({ height });
                setCurrentHeight((prev) => height);
                // currentOwnHeight = height;
                // 动态设置气泡的高度
              }}
            >
              {/* <Text>{currentMessage.text}</Text> */}
              <AutoMessage
                {...props}
                message={currentMessage.text}
                messageData={currentMessage}
                mType={currentMessage.mType}
                height={currentHeight}
                onSend={onSend}
              />
            </View>
          ) : (
            currentMessage.text
          ),
      }}
    />
  );
}
const AutoMessage = ({
  message = "",
  mType,
  height,
  currentMessage,

  ...props
}) => {
  // console.log("data", height);
  const tailwind = useTailwind();
  const test = message.split("|");
  const btns = test[1].split(",");
  return (
    <View
      {...props}
      style={{ marginTop: height, paddingVertical: 10, width: 200 }}
    >
      <View style={{ marginTop: 10 }}>
        <Text style={{ fontSize: 16 }}>{test[0]}</Text>
      </View>
      <View
        style={{
          ...tailwind("flex-row flex-wrap mt-2"),
          gap: 8,
        }}
      >
        {btns.map((item, index) => {
          return <AutoAnswerBtn key={index} text={item} {...props} />;
        })}
      </View>
    </View>
  );

  // data.m_type===1?it?.text.split("|")it?.text
};