import { View, Text, ScrollView } from "react-native";
import React, { useState, useEffect } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Icon, Button } from "@rneui/themed";
import baseRequest from "../../../utils/baseRequest";
import Toast from "react-native-toast-message";
import { generateSignature } from "../../../utils/crypto";

export default function AfterSubmitStreamerVerification({ navigation, route }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();

  //获取运营微信
  const [wechatList, setWechatList] = useState([]);
  useEffect(() => {
    const getWechat = async () => {
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;
      try {
        const base = await baseRequest();
        const signature = await generateSignature({
          ...base,
        });
        const response = await fetch(
          `${apiUrl}/api/support_wx_id/list?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              ...base,
            }),
          }
        );
        const data = await response.json();
        if (data.ret === -1) {
          Toast.show({
            type: "error",
            text1: data.msg,
            topOffset: 60,
          });
          return;
        }
        const temWechat = Object.entries(data.data);
        const temWechatList = temWechat.map((item) => item[1]);
        setWechatList(temWechatList);
      } catch (error) {
        console.error(error);
      }
    };
    getWechat();
  }, []);

  return (
    <ScrollView
      style={{
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex-1"),
      }}
    >
      <View style={tailwind("flex flex-col items-center p-4")}>
        <Icon
          name="checkmark-circle"
          type="ionicon"
          color="#27F5B7"
          size={100}
        />
        <Text style={tailwind("text-2xl text-white font-medium mb-2")}>
          提交成功
        </Text>
        <Text style={tailwind("text-base text-center text-white font-medium")}>
          请添加工作人员
          <Text style={tailwind("text-[#F53030]")}>微信：{wechatList[0]}</Text>
          直接商讨合作事宜，如未添加可能影响审核进度，请及时添加。您可以选择继续完善资料，这将加快您的审核进度。
        </Text>
        <View style={tailwind("mt-4")}>
          {wechatList.map((item, index) => {
            if (index === 0) return;
            return (
              <Text key={index} style={tailwind("text-base text-[#F53030]")}>
                备用微信{index}：{item}
              </Text>
            );
          })}
        </View>
        <View style={tailwind("flex flex-col w-full px-4")}>
          <Button
            onPress={() => navigation.replace("CompleteStreamerInformation")}
            color="#FF669E"
            radius="999"
            size="md"
            titleStyle={tailwind("text-base")}
            containerStyle={tailwind("my-4 w-full")}
          >
            <View style={tailwind("flex flex-col items-center")}>
              <Text style={tailwind("text-base text-white")}>前往完善资料</Text>
              <Text style={tailwind("text-xs text-white")}>
                （一次填完更快审核哦～）
              </Text>
            </View>
          </Button>
          <Button
            onPress={() => navigation.goBack()}
            color="#FFFFFF1A"
            radius="999"
            size="md"
            titleStyle={tailwind("text-base")}
            containerStyle={{
              marginBottom: insets.bottom + 60,
              ...tailwind("w-full"),
            }}
          >
            <View style={tailwind("flex flex-col items-center")}>
              <Text style={tailwind("text-base text-white")}>返回主页</Text>
              <Text style={tailwind("text-xs text-white")}>
                （可在“我的”继续完善资料）
              </Text>
            </View>
          </Button>
        </View>
      </View>
    </ScrollView>
  );
}
