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 GetWechatModal from "../../components/GetWechatModal";
import SubmitWechatModal from "../../components/SubmitWechatModal";
import { generateSignature } from "../../utils/crypto";

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

export default function UnlockedWechat() {
  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 signature = await generateSignature({
        offset: offset,
        limit: 12,
        ...base,
      });
      //查已解锁微信的主播的mid
      const response = await fetch(
        `${apiUrl}/api/vas/get_unlock_wechat_list?signature=${signature}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            offset: offset,
            limit: 12,
            ...base,
          }),
        }
      );
      const temData = await response.json();
      if (temData.ret === -1) {
        Toast.show({
          type: "error",
          text1: temData.msg,
          topOffset: 60,
        });
        return;
      }
      setData([...data, ...temData.data.list]);
      setOffset(temData.data.offset);
      setMore(temData.data.more);
    } catch (error) {
      console.error(error);
    }
  };

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

  //设置当前需要显示的查看微信modal的类型和streameMid
  const [isGetWechatModalVisible, setIsGetWechatModalVisible] = useState(false);
  const [isSubmitWechatModalVisible, setIsSubmitWechatModalVisible] =
    useState(false);
  const [streamerMid, setStreamerMid] = useState();

  //单条记录组件
  const renderItem = ({ item }) => {
    const handleWechatModal = async () => {
      setStreamerMid(item.account.mid);
      if (item.lock_type === 1) {
        setIsSubmitWechatModalVisible(!isSubmitWechatModalVisible);
      } else {
        setIsGetWechatModalVisible(!isGetWechatModalVisible);
      }
    };
    return (
      <ListItem
        onPress={() =>
          navigation.navigate("StreamerProfile", {
            mid: item.account.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.account?.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.account.name}
              </Text>
              <Text
                style={tailwind("text-sm text-[#FFFFFF80] font-medium")}
                numberOfLines={1}
                ellipsizeMode="tail"
              >
                {item.streamer.bio}
              </Text>
            </View>
            <View style={tailwind("ml-2 justify-around items-center")}>
              <Button
                titleStyle={tailwind("text-sm font-medium px-2")}
                color="#FF669E"
                radius="999"
                size="md"
                onPress={handleWechatModal}
              >
                查看微信
              </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>
      <GetWechatModal
        visible={isGetWechatModalVisible}
        setVisible={setIsGetWechatModalVisible}
        streamerMid={streamerMid}
      />
      <SubmitWechatModal
        visible={isSubmitWechatModalVisible}
        setVisible={setIsSubmitWechatModalVisible}
        streamerMid={streamerMid}
      />
    </View>
  );
}