import {
  View,
  Text,
  Modal,
  TouchableOpacity,
  TextInput,
  Keyboard,
  Alert,
} from "react-native";
import React, { useState, useEffect } from "react";
import { useTailwind } from "tailwind-rn";
import { Image } from "expo-image";
import { useNavigation } from "@react-navigation/native";
import { get } from "../../utils/storeInfo";
import baseRequest from "../../utils/baseRequest";
import Toast from "react-native-toast-message";
import { generateSignature } from "../../utils/crypto";

//todo:每次回来重新获取数据刷新余额、如果是本人则直接展示微信
//todo:等待接口上线，完善样式，测试

export default function SubmitWechatModal({
  visible,
  setVisible,
  streamerMid,
}) {
  const tailwind = useTailwind();
  const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
  const navigation = useNavigation();

  //保存用户数据
  const [userData, setUserData] = useState({});
  //保存主播数据
  const [streamerData, setStreamerData] = useState({});
  //是否已经解锁微信
  const [isWechatUnlocked, setIsWechatUnlocked] = useState(false);
  //是否展示余额不足内容
  const [isMoneyEnough, setIsMoneyEnough] = useState(true);
  //保存用户微信号
  const [userWechat, setUserWechat] = useState("");
  //保存用户备注
  const [remarks, setRemarks] = useState("");

  useEffect(() => {
    const getInitData = async () => {
      const account = await get("account");
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;
      const base = await baseRequest();
      const signature = await generateSignature({
        mid: streamerMid,
        ...base,
      });
      try {
        //获取主播数据
        const streamerResponse = await fetch(
          `${apiUrl}/api/streamer/list_ext_by_mid?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              mid: streamerMid,
              ...base,
            }),
          }
        );
        const temStreamerData = await streamerResponse.json();
        if (temStreamerData.ret === -1) {
          Toast.show({
            type: "error",
            text1: temStreamerData.msg,
            topOffset: 60,
          });
          return;
        }
        setStreamerData({
          ...temStreamerData.data.streamer_ext,
          wechat_coin_price:
            temStreamerData.data.streamer_ext.wechat_coin_price,
        });
        //是否已经解锁微信
        setIsWechatUnlocked(temStreamerData.data.is_unlock_wechat);
        //获取用户数据
        const signature2 = await generateSignature({
          ...base,
          mid: account.mid,
        });
        const userResponse = await fetch(
          `${apiUrl}/api/account/list_by_mid?signature=${signature2}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              ...base,
              mid: account.mid,
            }),
          }
        );
        const temUserData = await userResponse.json();
        if (temUserData.ret === -1) {
          Toast.show({
            type: "error",
            text1: temUserData.msg,
            topOffset: 60,
          });
          return;
        }
        setUserData(temUserData.data.account);
      } catch (error) {
        console.error(error);
      }
    };
    if (!streamerMid) return;
    getInitData();
  }, [streamerMid]);

  //点击解锁微信按钮
  const unlockWechat = async () => {
    if (userData?.gold_num >= streamerData?.wechat_coin_price) {
      //先提交用户微信和备注再进行支付，支付成功后添加解锁关系
      //先支付，再提交用户微信和备注
      if (!userWechat) {
        Alert.alert(null, "请填写您的微信");
        return;
      }
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;
      const base = await baseRequest();
      const signature = await generateSignature({
        contact_product_id: "contact_wechat",
        uid: streamerMid,
        ...base,
      });
      try {
        //支付金币解锁微信
        const unlockResponse = await fetch(
          `${apiUrl}/api/vas/one_step_unlock?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              contact_product_id: "contact_wechat",
              uid: streamerMid,
              ...base,
            }),
          }
        );
        const unlockData = await unlockResponse.json();
        if (unlockData.ret === -1) {
          Toast.show({
            type: "error",
            text1: unlockData.msg,
            topOffset: 60,
          });
          return;
        }
        //提交用户微信和备注
        const signature2 = await generateSignature({
          order_id: unlockData.data.order_id,
          wechat: userWechat,
          note: remarks,
          ...base,
        });
        const submitWechatResponse = await fetch(
          `${apiUrl}/api/vas/consumer_fill_contact?signature=${signature2}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              order_id: unlockData.data.order_id,
              wechat: userWechat,
              note: remarks,
              ...base,
            }),
          }
        );
        const submitWechatData = await submitWechatResponse.json();
        if (submitWechatData.ret === -1) {
          Toast.show({
            type: "error",
            text1: submitWechatData.msg,
            topOffset: 60,
          });
          return;
        }
        //展示解锁成功界面
        setIsWechatUnlocked(true);
      } catch (error) {
        console.error(error);
      }
    } else {
      setIsMoneyEnough(false);
    }
  };

  return (
    <Modal
      visible={visible}
      transparent={true}
      statusBarTranslucent
      animationType="fade"
    >
      <TouchableOpacity
        activeOpacity={1}
        onPress={() => setVisible(false)}
        style={{
          backgroundColor: "#00000080",
          ...tailwind("flex-1 justify-center items-center"),
        }}
      >
        <TouchableOpacity
          activeOpacity={1}
          onPress={() => Keyboard.dismiss()}
          style={tailwind("p-4 rounded-2xl bg-[#1E1C29] items-center w-3/4")}
        >
          {isMoneyEnough ? (
            <>
              <View style={tailwind("items-center")}>
                <Image
                  style={tailwind("w-16 h-16 rounded-full absolute -top-12")}
                  source={streamerData?.avatar?.images[0]?.urls[0]}
                  placeholder={blurhash}
                  contentFit="cover"
                  transition={1000}
                  cachePolicy="disk"
                />
              </View>
              <Text style={tailwind("text-2xl text-white font-medium mt-4")}>
                {streamerData?.name}
              </Text>
              {/* 提交微信区 */}
              {isWechatUnlocked ? (
                <View>
                  <Text style={tailwind("text-sm text-white mt-2")}>
                    已成功提交您的微信，请耐心等待
                  </Text>
                </View>
              ) : (
                <View style={tailwind("flex flex-col items-start w-full")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>您的微信
                  </Text>
                  <TextInput
                    placeholder="填写您的微信，以便Ta主动联系您"
                    placeholderTextColor="#FFFFFF80"
                    style={tailwind(
                      "text-white border border-[#2c2b2f] rounded-xl p-2 my-1 w-full"
                    )}
                    underlineColorAndroid="transparent"
                    onChangeText={(value) => setUserWechat(value)}
                    value={userWechat}
                  />
                  <Text style={tailwind("text-base text-white font-medium")}>
                    备注
                  </Text>
                  <TextInput
                    placeholder="如添加好友需填写验证信息，请将相应答案填写在此处"
                    placeholderTextColor="#FFFFFF80"
                    multiline
                    textAlignVertical="top"
                    style={tailwind(
                      "text-white border border-[#2c2b2f] rounded-xl p-2 my-1 w-full"
                    )}
                    underlineColorAndroid="transparent"
                    onChangeText={(value) => setRemarks(value)}
                    value={remarks}
                  />
                </View>
              )}
              <Text style={tailwind("text-xs text-[#F53030] font-medium my-2")}>
                若解锁后72小时未通过好友，请联系客服
              </Text>
              {!isWechatUnlocked && (
                <TouchableOpacity
                  onPress={unlockWechat}
                  style={tailwind(
                    "px-4 py-2 bg-[#FF669E] rounded-full items-center justify-center"
                  )}
                >
                  <Text style={tailwind("text-white text-base font-medium")}>
                    提交并支付（{streamerData?.wechat_coin_price}金币）
                  </Text>
                </TouchableOpacity>
              )}
            </>
          ) : (
            <>
              <Text style={tailwind("text-2xl text-white font-medium mb-4")}>
                余额不足
              </Text>
              <TouchableOpacity
                onPress={() => {
                  navigation.navigate("Wallet");
                  setVisible(false);
                }}
                style={tailwind(
                  "px-4 py-2 bg-[#FF669E] rounded-full items-center justify-center"
                )}
              >
                <Text style={tailwind("text-white text-base")}>前往充值</Text>
              </TouchableOpacity>
            </>
          )}
        </TouchableOpacity>
      </TouchableOpacity>
    </Modal>
  );
}