import { View, 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 Follows from "./Follows";
import Fans from "./Fans";

export default function Relationship({ navigation, route }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();
  const [index, setIndex] = useState(route.params.tab);
  //修复ios使用了tab组件闪退问题
  const windowWidth = Dimensions.get("window").width;
  const tabWidth = windowWidth / 2;
  const [indicatorX, setIndicatorX] = useState(route.params.tab * tabWidth);
  return (
    <View
      style={{
        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-full")}>
          <Tab
            value={index}
            onChange={(e) => {
              setIndex(e);
              setIndicatorX(e * tabWidth);
            }}
            dense
            indicatorStyle={{
              ...tailwind("bg-[#FF7DCB] rounded-full"),
              transform: [{ translateX: indicatorX }],
            }}
          >
            <Tab.Item
              titleStyle={
                index === 0
                  ? tailwind("text-white font-medium text-base")
                  : tailwind("text-[#FFFFFF80] text-base font-medium")
              }
            >
              关注
            </Tab.Item>
            <Tab.Item
              titleStyle={
                index === 1
                  ? tailwind("text-white font-medium text-base")
                  : tailwind("text-[#FFFFFF80] text-base font-medium")
              }
            >
              粉丝
            </Tab.Item>
          </Tab>
        </View>
      </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")}>
            <Follows />
          </TabView.Item>
          <TabView.Item style={tailwind("w-full flex-1")}>
            <Fans />
          </TabView.Item>
        </TabView>
      </View>
    </View>
  );
}