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 } from "@rneui/themed";
import baseRequest from "../../../utils/baseRequest";
import { get } from "../../../utils/storeInfo";
import Toast from "react-native-toast-message";
import { generateSignature } from "../../../utils/crypto";

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

export default function Fans() {
  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_is_followed?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 fansMids = temData.data.list.map((item) => item.obj_mid);
      const signature2 = await generateSignature({
        mids: fansMids,
        offset: 0,
        limit: 12,
        ...base,
      });
      const fansResponse = await fetch(
        `${apiUrl}/api/account/list_others_by_mids?signature=${signature2}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            mids: fansMids,
            offset: 0,
            limit: 12,
            ...base,
          }),
        }
      );
      const fansData = await fansResponse.json();
      if (fansData.ret === -1) {
        Toast.show({
          type: "error",
          text1: fansData.msg,
          topOffset: 60,
        });
        return;
      }

      setData([...data, ...fansData.data.list]);
      setOffset(temData.data.offset);
      setMore(temData.data.more);
    } catch (error) {
      console.error(error);
    }
  };

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

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

  //单条通话记录组件
  const renderItem = ({ item }) => {
    return (
      <ListItem 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"
              >
                ID:{item.user_id}
              </Text>
            </View>
          </View>
        </View>
      </ListItem>
    );
  };

  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>
  );
}