import { View, Text, RefreshControl, TouchableOpacity } from "react-native";
import React, { useState, useEffect, useCallback } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Toast from "react-native-toast-message";
import Empty from "../../../components/Empty";
import { FlashList } from "@shopify/flash-list";
import { useNavigation } from "@react-navigation/native";
import SpaceCard from "../../../components/SpaceCard";

export default function SpaceList() {
  const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";

  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();

  const navigation = useNavigation();

  const data = [
    {
      mid: 11,
    },
    {
      mid: 22,
    },
    {
      mid: 33,
    },
    {
      mid: 44,
    },
  ];

  const renderItem = ({ item }) => <SpaceCard data={data} />;

  //数据为空时的组件
  const EmptyComponent = useCallback(() => {
    return (
      <View style={tailwind("flex flex-col justify-center items-center")}>
        <Empty type="nospace" />
        <TouchableOpacity
          onPress={() => navigation.navigate("Search")}
          style={{
            width: 190,
            height: 46,
            ...tailwind(
              "flex items-center justify-center bg-[#2E2E2E] mt-3 rounded-full"
            ),
          }}
        >
          <Text style={tailwind("text-white text-base font-medium")}>
            搜索空间
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => navigation.navigate("Stream")}
          style={{
            width: 190,
            height: 46,
            ...tailwind(
              "flex items-center justify-center bg-[#2E2E2E] mt-2 rounded-full"
            ),
          }}
        >
          <Text style={tailwind("text-white text-base font-medium")}>
            查看推荐
          </Text>
        </TouchableOpacity>
      </View>
    );
  }, []);

  //下拉刷新
  const [refreshing, setRefreshing] = useState(false);
  const handleRefresh = async () => {
    setRefreshing(true);
    setRefreshing(false);
  };

  return (
    <View
      style={{
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex-1"),
      }}
    >
      <View style={tailwind("flex-1 px-2")}>
        <FlashList
          data={data}
          keyExtractor={(item) => item.mid}
          renderItem={renderItem}
          estimatedItemSize={287}
          initialNumToRender={12}
          numColumns={2}
          refreshControl={
            <RefreshControl
              colors={["#FF669E"]}
              tintColor="white"
              refreshing={refreshing}
              onRefresh={() => handleRefresh()}
            />
          }
          onEndReached={() => {}}
          ListEmptyComponent={EmptyComponent}
        />
      </View>
    </View>
  );
}