import {
  View,
  Text,
  TextInput,
  TouchableWithoutFeedback,
  Keyboard,
  ScrollView,
} from "react-native";
import React, { useState, useEffect, useContext } from "react";
import { useTailwind } from "tailwind-rn";
import { Button } from "@rneui/themed";
import Toast from "react-native-toast-message";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { get } from "../../../utils/storeInfo";
import { JSEncrypt } from "jsencrypt";
import { cryptoPassword, generateSignature } from "../../../utils/crypto";
import { AuthContext } from "../../../App";
import MyDivider from "../../../components/MyDivider";
import baseRequest from "../../../utils/baseRequest";

export default function EditPassword({ navigation }) {
  const { signOut } = useContext(AuthContext);
  const insets = useSafeAreaInsets();
  const tailwind = useTailwind();

  //获取环境变量
  const apiUrl = process.env.EXPO_PUBLIC_API_URL;

  //保存区号、手机号、验证码、旧密码、新密码
  const [regionCode, setRegionCode] = useState("");
  const [mobilePhone, setMobilePhone] = useState("");
  const [veriCode, setVeriCode] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  //获取当前用户的手机号
  useEffect(() => {
    async function getMobilePhone() {
      setMobilePhone(await get("mobile_phone"));
      setRegionCode(await get("region_code"));
    }
    getMobilePhone();
  }, []);

  //重新获取验证码的计时器
  const [isCounting, setIsCounting] = useState(false);
  const [seconds, setSeconds] = useState(60);
  useEffect(() => {
    let interval;
    if (isCounting && seconds > 0) {
      interval = setInterval(() => {
        setSeconds(seconds - 1);
      }, 1000);
    } else {
      setIsCounting(false);
      setSeconds(60);
      clearInterval(interval);
    }
    return () => {
      clearInterval(interval);
    };
  }, [isCounting, seconds]);

  //点击获取验证码
  const handleVerification = async () => {
    //手机号校验
    if (!mobilePhone.match(/^1[3456789]\d{9}$/)) {
      Toast.show({
        type: "error",
        text1: "手机号码格式错误",
        topOffset: 60,
      });
      return;
    }
    //开始倒计时
    setIsCounting(true);
    //对手机号进行RSA加密
    const encrypt = new JSEncrypt();
    encrypt.setPublicKey(process.env.EXPO_PUBLIC_RSA_KEY);
    const mobile_phone = encrypt.encrypt(mobilePhone);
    //发送短信验证码
    const base = await baseRequest();
    const signature = await generateSignature({
      mobile_phone: mobile_phone,
      region_code: regionCode,
      ...base,
    });
    try {
      await fetch(`${apiUrl}/api/veri_code/send?signature=${signature}`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          mobile_phone: mobile_phone,
          region_code: regionCode,
          ...base,
        }),
      });
    } catch (error) {
      console.error(error);
    }
  };
  //点击修改密码
  const handleUpdatePassword = async () => {
    //验证数据格式
    if (!mobilePhone.match(/^1[3456789]\d{9}$/)) {
      Toast.show({
        type: "error",
        text1: "手机号码格式错误",
        topOffset: 60,
      });
      return;
    }
    if (!veriCode) {
      Toast.show({
        type: "error",
        text1: "请输入验证码",
        topOffset: 60,
      });
      return;
    }
    if (!confirmPassword) {
      Toast.show({
        type: "error",
        text1: "请再次输入您的密码",
        topOffset: 60,
      });
      return;
    }
    if (newPassword != confirmPassword) {
      Toast.show({
        type: "error",
        text1: "两次输入密码不一致",
        topOffset: 60,
      });
      return;
    }
    if (newPassword.length < 8) {
      Toast.show({
        type: "error",
        text1: "新密码不得小于8位",
        topOffset: 60,
      });
      return;
    }
    if (newPassword.length > 15) {
      Toast.show({
        type: "error",
        text1: "新密码不得大于15位",
        topOffset: 60,
      });
      return;
    }
    //对手机号进行RSA加密
    const encrypt = new JSEncrypt();
    encrypt.setPublicKey(process.env.EXPO_PUBLIC_RSA_KEY);
    const mobile_phone = encrypt.encrypt(mobilePhone);
    //MD5加密新旧密码
    const encryptedNewPassword = await cryptoPassword(newPassword);
    //发送修改密码请求
    const base = await baseRequest();
    const signature = await generateSignature({
      mobile_phone: mobile_phone,
      region_code: regionCode,
      veri_code: veriCode,
      new_password: encryptedNewPassword,
      ...base,
    });
    try {
      const response = await fetch(
        `${apiUrl}/api/login/reset_password?signature=${signature}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            mobile_phone: mobile_phone,
            region_code: regionCode,
            veri_code: veriCode,
            new_password: encryptedNewPassword,
            ...base,
          }),
        }
      );
      const data = await response.json();
      if (data.ret === -1) {
        Toast.show({
          type: "error",
          text1: data.msg,
          topOffset: 60,
        });
        return;
      }
      Toast.show({
        type: "success",
        text1: "修改成功，请重新登录",
        topOffset: 60,
      });
      signOut();
    } catch (error) {
      console.error(error);
    }
  };
  return (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <ScrollView
        style={{
          paddingTop: insets.top,
          paddingBottom: insets.bottom,
          paddingLeft: insets.left,
          paddingRight: insets.right,
          ...tailwind("flex-1 flex-col"),
        }}
      >
        <View style={tailwind("flex px-4 mt-32 justify-center")}>
          <Text style={tailwind("text-3xl text-white font-medium")}>
            修改密码
          </Text>
          <Text style={tailwind("text-base text-white mb-10")}>请牢记密码</Text>
          <View style={tailwind("border-2 border-[#2c2b2f] rounded-2xl p-4")}>
            <View
              style={tailwind("flex flex-row flex-nowrap items-center mb-4")}
            >
              <Text style={tailwind("text-base text-white mr-4")}>
                +{regionCode}
              </Text>
              <TextInput
                placeholder="未获取到手机号，请重新登录"
                placeholderTextColor="#FFFFFF80"
                underlineColorAndroid="transparent"
                keyboardType="numeric"
                editable={false}
                onChangeText={(value) => setMobilePhone(value)}
                value={mobilePhone}
                style={tailwind("flex-1 text-white")}
              />
            </View>
            <MyDivider />
            <View
              style={tailwind("flex flex-row flex-nowrap items-center my-4")}
            >
              <Text style={tailwind("text-base text-white mr-4")}>验证码</Text>
              <TextInput
                placeholder="请输入验证码"
                placeholderTextColor="#FFFFFF80"
                underlineColorAndroid="transparent"
                keyboardType="numeric"
                onChangeText={(value) => setVeriCode(value)}
                value={veriCode}
                style={tailwind("flex-1 text-white")}
              />
              <Button
                color="#FF669E"
                radius="999"
                size="sm"
                disabled={isCounting}
                disabledStyle={tailwind("bg-[#FFFFFF1A]")}
                titleStyle={tailwind("text-sm font-medium mx-2")}
                onPress={handleVerification}
              >
                {isCounting ? `(${seconds})重新发送` : "获取验证码"}
              </Button>
            </View>
            <MyDivider />
            <View
              style={tailwind("flex flex-row flex-nowrap items-center my-4")}
            >
              <Text style={tailwind("text-base text-white mr-4")}>新密码</Text>
              <TextInput
                placeholder="请输入8-15位新密码"
                placeholderTextColor="#FFFFFF80"
                underlineColorAndroid="transparent"
                secureTextEntry={true}
                onChangeText={(value) => setNewPassword(value)}
                value={newPassword}
                style={tailwind("flex-1 text-white")}
              />
            </View>
            <MyDivider />
            <View
              style={tailwind("flex flex-row flex-nowrap items-center mt-4")}
            >
              <Text style={tailwind("text-base text-white mr-4")}>
                确认密码
              </Text>
              <TextInput
                placeholder="请再次输入新密码"
                placeholderTextColor="#FFFFFF80"
                underlineColorAndroid="transparent"
                secureTextEntry={true}
                onChangeText={(value) => setConfirmPassword(value)}
                value={confirmPassword}
                style={tailwind("flex-1 text-white")}
              />
            </View>
          </View>
          <Button
            color="#FF669E"
            radius="999"
            size="md"
            onPress={handleUpdatePassword}
            titleStyle={tailwind("text-base font-medium")}
            containerStyle={tailwind("mt-16")}
          >
            确认修改
          </Button>
        </View>
      </ScrollView>
    </TouchableWithoutFeedback>
  );
}