import {
  View,
  ScrollView,
  KeyboardAvoidingView,
  Platform,
  TouchableOpacity,
} from "react-native";
import React, { useState, useEffect } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Image } from "expo-image";
import requireAPI from "../../../utils/requireAPI";
export default function JoinEntrance({ navigation, route }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();
  const [guildState, setGuildState] = useState(null);
  const [streamerState, setStreamerState] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  //是否正在拖动图片，用于禁用ScrollView的滚动
  const [dragging, setDragging] = useState(false);
  useEffect(() => {
    setIsLoading(true);
    checkGuildState();
    checkStreamerState();
    setIsLoading(false);
  }, []);
  const checkStreamerState = async () => {
    //获取当前审批状态
    const streamerData = await requireAPI(
      "POST",
      "/api/streamer_auth_approval/get_statuses",
      {}
    );
    if (streamerData.ret === -1) {
      Toast.show({
        icon: "fail",
        content: streamerData.msg,
        position: 60,
      });
      return;
    }
    setStreamerState(streamerData.data);
  };
  const checkGuildState = async () => {
    //上传表单
    try {
      const guildData = await requireAPI(
        "POST",
        "/api/guild_registration/list",
        null,
        true
      );
      if (guildData.ret === -1) {
        Toast.show({
          icon: "fail",
          content: guildData.msg,
          position: 60,
        });
        return;
      }
      setGuildState(guildData.data.list[0]?.status);
    } catch (error) {
      console.error(error);
    }
  };
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS == "ios" ? "padding" : "height"}
      keyboardVerticalOffset={insets.bottom + 60}
      style={{
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex-1"),
      }}
    >
      <ScrollView scrollEnabled={!dragging} style={tailwind("px-4 py-4")}>
        <View
          style={{
            ...tailwind("flex flex-col"),
          }}
        >
          <TouchableOpacity
            style={tailwind("my-2")}
            onPress={() =>
              (streamerState?.basic_status === 2 ||
                streamerState?.basic_status === 4) &&
              navigation.navigate("JoinStreamer")
            }
          >
            <Image
              style={tailwind("h-32")}
              source={
                streamerState?.basic_status === 2 ||
                streamerState?.basic_status === 4
                  ? require("../../../assets/images/streamerJoin.png")
                  : require("../../../assets/images/streamerJoined.png")
              }
              contentFit="cover"
              transition={100}
              cachePolicy="disk"
            />
          </TouchableOpacity>
          <TouchableOpacity
            style={tailwind("my-2")}
            onPress={() => guildState !== 0 && navigation.navigate("JoinGuild")}
          >
            <Image
              style={tailwind("h-32")}
              source={
                guildState !== 0
                  ? require("../../../assets/images/guildJoin.png")
                  : require("../../../assets/images/guildJoined.png")
              }
              contentFit="cover"
              transition={100}
              cachePolicy="disk"
            />
          </TouchableOpacity>
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}