import React, { useState, useEffect, useCallback } from "react";
import { Image, TouchableOpacity, View } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Stream from "../Stream";
import My from "../My";
import Posts from "../Posts";
import Space from "../Space";
import { get } from "../../utils/storeInfo";
import CreatePostModal from "../../components/CreatePostModal";

const Tab = createBottomTabNavigator();

export default function HomeTab({ navigation, route }) {
  const [isCreatePostTabVisible, setIsCreatePostTabVisible] = useState(false);
  useEffect(() => {
    const checkRole = async () => {
      const account = await get("account");
      if (account.role === 3) setIsCreatePostTabVisible(true);
    };
    checkRole();
  }, []);

  const CustomTabBarButton = useCallback(({ children }) => {
    const [visible, setVisible] = useState(false);
    return (
      <TouchableOpacity
        style={{
          top: -10,
          justifyContent: "center",
          alignItems: "center",
        }}
        onPress={() => setVisible(!visible)}
      >
        <View
          style={{
            width: 70,
            height: 70,
            borderRadius: 35,
          }}
        >
          {children}
        </View>
        <CreatePostModal visible={visible} setVisible={setVisible} />
      </TouchableOpacity>
    );
  }, []);

  const EmptyComponent = () => <></>;

  return (
    <Tab.Navigator
      screenOptions={() => ({
        tabBarActiveTintColor: "#FF669E",
        tabBarInactiveTintColor: "gray",
        tabBarStyle: {
          backgroundColor: "#07050A",
          borderTopColor: "#FFFFFF26",
        },
      })}
    >
      <Tab.Screen
        name="Posts"
        component={Posts}
        options={{
          title: "广场",
          headerShown: false,
          tabBarIcon: ({ focused, color, size }) => {
            if (focused) {
              return (
                <Image
                  source={require("../../assets/icon/others/postfocus.png")}
                />
              );
            } else {
              return (
                <Image
                  source={require("../../assets/icon/others/postblur.png")}
                />
              );
            }
          },
        }}
      />
      <Tab.Screen
        name="Space"
        component={Space}
        options={{
          title: "空间",
          headerShown: false,
          tabBarIcon: ({ focused, color, size }) => {
            if (focused) {
              return (
                <Image
                  source={require("../../assets/icon/others/space_focus.png")}
                />
              );
            } else {
              return (
                <Image
                  source={require("../../assets/icon/others/space_blur.png")}
                />
              );
            }
          },
        }}
      />
      {isCreatePostTabVisible && (
        <Tab.Screen
          name="Publish"
          component={EmptyComponent}
          options={{
            title: "",
            headerShown: false,
            tabBarIcon: ({ focused, color, size }) => (
              <Image
                source={require("../../assets/icon/others/createpost.png")}
              />
            ),
            tabBarButton: (props) => <CustomTabBarButton {...props} />,
          }}
        />
      )}
      <Tab.Screen
        name="Stream"
        component={Stream}
        options={{
          title: "发现",
          headerShown: false,
          tabBarIcon: ({ focused, color, size }) => {
            if (focused) {
              return (
                <Image
                  source={require("../../assets/icon/others/streamfocus.png")}
                />
              );
            } else {
              return (
                <Image
                  source={require("../../assets/icon/others/streamblur.png")}
                />
              );
            }
          },
        }}
      />
      <Tab.Screen
        name="My"
        component={My}
        options={{
          title: "我的",
          headerShown: false,
          tabBarIcon: ({ focused, color, size }) => {
            if (focused) {
              return (
                <Image
                  source={require("../../assets/icon/others/myfocus.png")}
                />
              );
            } else {
              return (
                <Image
                  source={require("../../assets/icon/others/myblur.png")}
                />
              );
            }
          },
        }}
      />
    </Tab.Navigator>
  );
}