import {
  View,
  Keyboard,
  TouchableWithoutFeedback,
  Dimensions,
} from "react-native";
import React, { useState } from "react";
import { Tab, TabView } from "@rneui/themed";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useTailwind } from "tailwind-rn";
import PasswordLogin from "./PasswordLogin";
import PhoneNumLogin from "./PhoneNumLogin";

export default function Login() {
  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 / 2;

  return (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <View
        style={{
          paddingTop: insets.top,
          paddingBottom: insets.bottom,
          paddingLeft: insets.left,
          paddingRight: insets.right,
          ...tailwind("flex flex-1"),
        }}
      >
        {/* tab栏 */}
        <Tab
          value={index}
          onChange={(e) => {
            Keyboard.dismiss();
            setIndex(e);
            setIndicatorX(e * tabWidth);
          }}
          dense
          indicatorStyle={{
            ...tailwind("bg-[#FF7DCB] h-1 w-20 ml-[3.2rem] rounded-full"),
            transform: [{ translateX: indicatorX }],
          }}
          style={tailwind("mt-32")}
        >
          <Tab.Item
            titleStyle={
              index === 0
                ? tailwind("text-white font-medium text-xl")
                : tailwind("text-[#FFFFFF80] text-xl font-medium")
            }
          >
            验证码登陆
          </Tab.Item>
          <Tab.Item
            titleStyle={
              index === 1
                ? tailwind("text-white font-medium text-xl")
                : tailwind("text-[#FFFFFF80] text-xl font-medium")
            }
          >
            账号密码登陆
          </Tab.Item>
        </Tab>
        <TabView
          value={index}
          onChange={(e) => {
            setIndex(e);
            setIndicatorX(e * tabWidth);
          }}
          animationType="spring"
          disableSwipe
        >
          <TabView.Item style={tailwind("w-full flex-1")}>
            <PhoneNumLogin />
          </TabView.Item>
          <TabView.Item style={tailwind("w-full flex-1")}>
            <PasswordLogin />
          </TabView.Item>
        </TabView>
      </View>
    </TouchableWithoutFeedback>
  );
}