import { View, Text, FlatList, RefreshControl } from "react-native";
import { Image } from "expo-image";
import React, { useState, useEffect } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Empty from "../../../components/Empty";
import { ListItem, Button } from "@rneui/themed";
import { useNavigation } from "@react-navigation/native";
import Toast from "react-native-toast-message";
import baseRequest from "../../../utils/baseRequest";
import { get } from "../../../utils/storeInfo";
import { follow, unfollow } from "../../../utils/relation";
import { generateSignature } from "../../../utils/crypto";

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

export default function Follows() {
  const navigation = useNavigation();
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();

  //查询数据
  const [data, setData] = useState([]);
  const [offset, setOffset] = useState(0);
  const [more, setMore] = useState(1);
  const apiUrl = process.env.EXPO_PUBLIC_API_URL;
  const getData = async () => {
    if (!more) return;
    try {
      const base = await baseRequest();
      const account = await get("account");
      const signature = await generateSignature({
        mid: account.mid,
        offset: offset,
        limit: 12,
        ...base,
      });
      //查关注mid
      const response = await fetch(
        `${apiUrl}/api/account_relation/list_follow?signature=${signature}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            mid: account.mid,
            offset: offset,
            limit: 12,
            ...base,
          }),
        }
      );
      const temData = await response.json();
      if (temData.ret === -1) {
        Toast.show({
          type: "error",
          text1: temData.msg,
          topOffset: 60,
        });
        return;
      }
      //查主播展示资料
      if (temData.data.list.length === 0) return;
      const followsMids = temData.data.list.map((item) => item.obj_mid);
      const signature2 = await generateSignature({
        mids: followsMids,
        offset: 0,
        limit: 12,
        ...base,
      });
      const followsResponse = await fetch(
        `${apiUrl}/api/streamer/list_ext_by_mids?signature=${signature2}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            mids: followsMids,
            offset: 0,
            limit: 12,
            ...base,
          }),
        }
      );
      const followsData = await followsResponse.json();
      if (followsData.ret === -1) {
        Toast.show({
          type: "error",
          text1: followsData.msg,
          topOffset: 60,
        });
        return;
      }
      const followsDataList = followsData.data.list.map((item) => ({
        ...item,
        isFollowed: true,
      }));
      setData([...data, ...followsDataList]);
      setOffset(temData.data.offset);
      setMore(temData.data.more);
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    getData();
  }, []);

  //单条记录组件
  const renderItem = ({ item }) => {
    const handleRelation = async () => {
      const account = await get("account");
      if (item.isFollowed === true) {
        await unfollow(account.mid, item.mid);
        const newData = data.map((listItem) => {
          if (listItem.mid === item.mid) {
            return {
              ...listItem,
              isFollowed: false,
            };
          } else {
            return listItem;
          }
        });
        setData(newData);
      } else {
        await follow(account.mid, item.mid);
        const newData = data.map((listItem) => {
          if (listItem.mid === item.mid) {
            return {
              ...listItem,
              isFollowed: true,
            };
          } else {
            return listItem;
          }
        });
        setData(newData);
      }
    };
    return (
      <ListItem
        onPress={() =>
          navigation.navigate("StreamerProfile", {
            mid: item.mid,
          })
        }
        bottomDivider
        containerStyle={tailwind("p-0 bg-transparent")}
      >
        <View style={tailwind("flex-1")}>
          <View style={tailwind("flex-row py-3")}>
            <Image
              style={tailwind("w-12 h-12 rounded-full")}
              source={item?.avatar?.images[0].urls[0]}
              placeholder={blurhash}
              contentFit="cover"
              transition={1000}
              cachePolicy="disk"
            />
            <View style={tailwind("ml-2 justify-around flex-1")}>
              <Text
                style={tailwind("text-base text-white font-medium")}
                numberOfLines={1}
                ellipsizeMode="tail"
              >
                {item.name}
              </Text>
              <Text
                style={tailwind("text-sm text-[#FFFFFF80] font-medium")}
                numberOfLines={1}
                ellipsizeMode="tail"
              >
                {item.bio}
              </Text>
            </View>
            <View style={tailwind("ml-2 justify-around items-center")}>
              <Button
                titleStyle={tailwind("text-sm font-medium px-2")}
                color={item.isFollowed ? "#FFFFFF1A" : "#FF669E"}
                radius="999"
                size="md"
                onPress={handleRelation}
              >
                {item.isFollowed ? "已关注" : "关注"}
              </Button>
            </View>
          </View>
        </View>
      </ListItem>
    );
  };

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

  return (
    <View
      style={{
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex-1"),
      }}
    >
      <View style={tailwind("px-4 flex-1")}>
        <FlatList
          data={data}
          renderItem={renderItem}
          initialNumToRender={12}
          refreshControl={
            <RefreshControl
              colors={["#FF669E"]}
              tintColor="white"
              refreshing={refreshing}
              onRefresh={() => handleRefresh()}
            />
          }
          onEndReached={() => getData()}
          ListEmptyComponent={<Empty type="friendship" />}
        />
      </View>
    </View>
  );
}