import {
  View,
  Text,
  Modal,
  TouchableOpacity,
  Image as NativeImage,
} from "react-native";
import React, { useState, useEffect } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useNavigation } from "@react-navigation/native";
import Toast from "react-native-toast-message";
import baseRequest from "../../utils/baseRequest";
import { generateSignature } from "../../utils/crypto";

export default function CreatePostModal({ visible, setVisible }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();
  const navigation = useNavigation();

  //查看主播是否已经创建空间
  const [isSpaceExist, setIsSpaceExist] = useState(true);
  useEffect(() => {
    const checkSpaceStatus = async () => {
      if (!visible) return;
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;
      try {
        const base = await baseRequest();
        const body = {
          mid: base.b_mid,
          ...base,
        };
        const signature = await generateSignature(body);
        const _response = await fetch(
          `${apiUrl}/api/zone/list_by_mid?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(body),
          }
        );
        const _data = await _response.json();
        if (_data.ret === -1) {
          return;
        }
        if (_data.data.list.length === 0) {
          setIsSpaceExist(false);
        }
      } catch (error) {
        console.error(error);
      }
    };
    checkSpaceStatus();
  }, [visible]);

  return (
    <Modal
      visible={visible}
      transparent={true}
      statusBarTranslucent
      animationType="slide"
    >
      <TouchableOpacity
        activeOpacity={1}
        style={{
          paddingBottom: insets.bottom,
          ...tailwind("flex flex-1 bg-[#00000080] px-4"),
        }}
        onPress={() => setVisible(false)}
      >
        <TouchableOpacity
          activeOpacity={1}
          style={tailwind(
            "flex flex-col mt-auto mb-2 h-48 bg-[#17161A] rounded-3xl"
          )}
        >
          <View
            style={tailwind(
              "flex flex-1 flex-row justify-between items-center px-12 py-6"
            )}
          >
            <TouchableOpacity
              onPress={
                isSpaceExist
                  ? () => {
                      navigation.navigate("CreateImagePost");
                      setVisible(false);
                    }
                  : () =>
                      Toast.show({
                        type: "error",
                        text1: "您还未创建空间，当前仅可发布广场动态",
                        topOffset: 60,
                      })
              }
              style={tailwind("flex flex-col items-center")}
            >
              <NativeImage
                source={require("../../assets/icon/others/image_post.png")}
              />
              <Text style={tailwind("text-sm text-white font-medium mt-2")}>
                发图片
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={
                isSpaceExist
                  ? () => {
                      navigation.navigate("CreateVideoPost");
                      setVisible(false);
                    }
                  : () =>
                      Toast.show({
                        type: "error",
                        text1: "您还未创建空间，当前仅可发布广场动态",
                        topOffset: 60,
                      })
              }
              style={tailwind("flex flex-col items-center")}
            >
              <NativeImage
                source={require("../../assets/icon/others/video_post.png")}
              />
              <Text style={tailwind("text-sm text-white font-medium mt-2")}>
                发视频
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                navigation.navigate("CreatePost");
                setVisible(false);
              }}
              style={tailwind("flex flex-col items-center")}
            >
              <NativeImage
                source={require("../../assets/icon/others/normal_post.png")}
              />
              <Text style={tailwind("text-sm text-white font-medium mt-2")}>
                广场动态
              </Text>
            </TouchableOpacity>
          </View>
          <TouchableOpacity
            onPress={() => setVisible(false)}
            style={{
              height: 52,
              ...tailwind(
                "flex justify-center items-center border-t border-[#FFFFFF14]"
              ),
            }}
          >
            <Text style={tailwind("text-white text-base font-medium")}>
              取消
            </Text>
          </TouchableOpacity>
        </TouchableOpacity>
      </TouchableOpacity>
      <Toast />
    </Modal>
  );
}