import { FlashList } from "@shopify/flash-list";
import { RefreshControl, StyleSheet, Text, View } from "react-native";

import { ConversationListItem } from "@/features/im/components/conversation-list-item";
import type { ConversationItem } from "@/features/im/types/conversation";

type ConversationListProps = {
  data: ConversationItem[];
  isLoading?: boolean;
  isRefreshing?: boolean;
  onRefresh?: () => void;
  onPressItem?: (item: ConversationItem) => void;
};

export function ConversationList({
  data,
  isLoading = false,
  isRefreshing = false,
  onRefresh,
  onPressItem,
}: ConversationListProps) {
  return (
    <FlashList
      alwaysBounceVertical
      bounces
      contentInsetAdjustmentBehavior="automatic"
      contentContainerStyle={styles.contentContainer}
      data={data}
      keyExtractor={(item) => item.id}
      ListEmptyComponent={
        <View style={styles.emptyContainer}>
          <Text style={styles.emptyTitle}>{isLoading ? "会话加载中..." : "暂无会话"}</Text>
          {!isLoading && <Text style={styles.emptyHint}>试试更换关键字</Text>}
        </View>
      }
      onRefresh={onRefresh}
      refreshControl={
        <RefreshControl
          colors={["#00D48C"]}
          onRefresh={onRefresh}
          refreshing={isRefreshing}
          tintColor="#00D48C"
        />
      }
      renderItem={({ item }) => (
        <ConversationListItem item={item} onPress={onPressItem} />
      )}
      refreshing={isRefreshing}
      showsVerticalScrollIndicator={false}
    />
  );
}

const styles = StyleSheet.create({
  contentContainer: {
    flexGrow: 1,
    paddingBottom: 28,
    paddingTop: 16,
  },
  emptyContainer: {
    alignItems: "center",
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 24,
  },
  emptyTitle: {
    color: "#666B73",
    fontSize: 17,
    fontWeight: "600",
  },
  emptyHint: {
    color: "#A0A4AA",
    fontSize: 13,
    marginTop: 6,
  },
});