import { View, Text } from "react-native";
import React from "react";
import { Image } from "expo-image";
import { useTailwind } from "tailwind-rn";
import { Badge, ListItem, Button } from "@rneui/themed";
import { useNavigation } from "@react-navigation/native";

const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";

export default function MessageCard({ data, listRef }) {
  const navigation = useNavigation();
  const tailwind = useTailwind();
  return (
    <ListItem.Swipeable
      onPress={() =>
        navigation.navigate("MessageDetail", {
          mid: data.mid,
          name: data.name,
          price: data.price,
        })
      }
      bottomDivider
      onSwipeBegin={() => {
        listRef.current.setNativeProps({
          scrollEnabled: false,
        });
      }}
      onSwipeEnd={() => {
        listRef.current.setNativeProps({
          scrollEnabled: true,
        });
      }}
      containerStyle={tailwind("p-0")}
      rightContent={(reset) => (
        <Button
          title="删除"
          onPress={() => {
            console.log("删除");
            reset();
          }}
          icon={{ name: "delete", color: "white" }}
          buttonStyle={{ minHeight: "100%", backgroundColor: "red" }}
          titleStyle={tailwind("text-base")}
        />
      )}
    >
      <View style={tailwind("flex-1")}>
        <View style={tailwind("flex-row py-3")}>
          <Image
            style={tailwind("w-12 h-12 rounded-full")}
            source={data.head}
            placeholder={blurhash}
            contentFit="cover"
            transition={1000}
            cachePolicy="disk"
          />
          <View style={tailwind("ml-2 justify-around flex-1")}>
            <Text
              style={tailwind("text-base")}
              numberOfLines={1}
              ellipsizeMode="tail"
            >
              {data.name}
            </Text>
            <Text
              style={tailwind("text-sm text-gray-400")}
              numberOfLines={1}
              ellipsizeMode="tail"
            >
              {data.latestContent}
            </Text>
          </View>
          <View style={tailwind("ml-2 justify-around items-center")}>
            <Text style={tailwind("text-sm text-gray-400")}>{data.time}</Text>
            <Badge
              value={data.newMessagesNum < 99 ? data.newMessagesNum : "99+"}
              status="error"
            />
          </View>
        </View>
      </View>
    </ListItem.Swipeable>
  );
}