import {
  View,
  TouchableOpacity,
  Image as NativeImage,
  Dimensions,
} from "react-native";
import React, { useState } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Tab, TabView } from "@rneui/themed";
import SpaceList from "./SpaceList";
import SpacePosts from "./SpacePosts";

export default function Space({ navigation }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();
  const [index, setIndex] = useState(0);

  //修复ios使用了tab组件闪退问题
  const [indicatorX, setIndicatorX] = useState(0);
  const windowWidth = Dimensions.get("window").width;
  const tabWidth = windowWidth / 5;

  return (
    <View
      style={{
        paddingTop: insets.top,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex flex-1"),
      }}
    >
      <View style={tailwind("flex pb-1 flex-row justify-between items-center")}>
        <View style={tailwind("flex w-2/5")}>
          <Tab
            value={index}
            onChange={(e) => {
              setIndex(e);
              setIndicatorX(e * tabWidth);
            }}
            dense
            indicatorStyle={{
              ...tailwind("h-1 w-10 ml-4 rounded-full"),
              backgroundColor: "#FF7DCB",
              transform: [{ translateX: indicatorX }],
            }}
          >
            <Tab.Item
              titleStyle={
                index === 0
                  ? tailwind("text-white text-2xl font-medium")
                  : { ...tailwind("text-2xl font-medium"), color: "#FFFFFF80" }
              }
            >
              空间
            </Tab.Item>
            <Tab.Item
              titleStyle={
                index === 1
                  ? tailwind("text-white text-2xl font-medium")
                  : { ...tailwind("text-2xl font-medium"), color: "#FFFFFF80" }
              }
            >
              动态
            </Tab.Item>
          </Tab>
        </View>
        <TouchableOpacity
          style={tailwind(
            "flex items-center justify-center w-9 h-9 mr-4 bg-[#FFFFFF1A] rounded-full"
          )}
          onPress={() => navigation.navigate("Search")}
        >
          <NativeImage source={require("../../assets/icon/32DP/search.png")} />
        </TouchableOpacity>
      </View>
      <View style={tailwind("flex flex-1 w-full")}>
        <TabView
          value={index}
          onChange={(e) => {
            setIndex(e);
            setIndicatorX(e * tabWidth);
          }}
          animationType="spring"
        >
          <TabView.Item style={tailwind("w-full flex-1")}>
            <SpaceList />
          </TabView.Item>
          <TabView.Item style={tailwind("w-full flex-1")}>
            <SpacePosts />
          </TabView.Item>
        </TabView>
      </View>
    </View>
  );
}