import React, { useState } from "react";
import { Div, Text } from "react-native-magnus";
import { Button } from "@ui-kitten/components";
import { useModel } from "flooks";
import { useCreation, useMount } from "ahooks";
import NavHeaderBar from "../../components/NavHeaderBar";
import SmsInput from "../../components/SmsInput";
import FormInput from "../../components/FormInput";

export default function BackPasswordScreen({ navigation }) {
  const { userInfo } = useModel("userModel");
  const { login_form_3, login_pla_3, confirm } = useModel("wordsModel");
  const { httpPost } = useModel("httpModel");
  const { success } = useModel("loadingModel");

  const [code, setcode] = useState("");
  const [password, setpassword] = useState();
  const [password2, setpassword2] = useState();
  const { showDialog } = useModel("dialogModel");
  const [takePhone, settakePhone] = useState(false);

  const { phone } = userInfo;

  const showPhone = useCreation(() => {
    if (phone) return `${phone.substr(0, 3)} **** ${phone.substr(-4, 4)}`;

    return "";
  }, [phone]);

  function changePassword() {
    httpPost(
      "/user/changePassword",
      {
        password,
        key: `+86${phone}`,
        code,
      },
      {},
      true
    ).then(() => {
      success("设置成功");
      setTimeout(() => {
        navigation.goBack();
      }, 1500);
    });
  }

  useMount(() => {
    if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone)) {
      showDialog({
        bodyText: "当前客户手机号异常,请联系客服更换密码",
        status: "danger",
        cancelable: false,
        confirmCallback: () => {
          navigation.goBack();
        },
      });
    } else {
      settakePhone(true);
    }
  });

  const canSubmit = useCreation(() => {
    if (phone && code && password && password2 === password) return true;
    return false;
  }, [phone, password, code, password2]);

  return (
    <>
      <NavHeaderBar title="登录密码设置" />
      <Div bg="white" py={15} alignItems="center" mt={10}>
        <Text color="black">我们已经向您的手机发送了短信校验码：</Text>
        <Text color="black" mt={5}>
          {showPhone}
        </Text>
      </Div>

      <Div bg="white" p={20} mt={10}>
        {/* 验证码 */}
        <SmsInput
          label={`${login_form_3}:`}
          placeholder={login_pla_3}
          labelWidth={50}
          phone={phone}
          onCodeChange={setcode}
          type="login"
          takePhone={takePhone}
        />

        {/* 密码 */}
        <FormInput
          label="新密码"
          value={password}
          type="password"
          placeholder="输入新密码"
          onChange={setpassword}
          textAlign="right"
          labelStyle={{ width: 50 }}
        />

        {/* 确认密码 */}
        <FormInput
          label="确认密码"
          value={password2}
          type="password"
          placeholder="再次输入新密码"
          onChange={setpassword2}
          textAlign="right"
          labelStyle={{ width: 50 }}
        />

        <Button
          disabled={!canSubmit}
          onPress={changePassword}
          style={{
            width: 112,
            marginTop: 20,
            alignSelf: "center",
          }}
        >
          {confirm}
        </Button>
      </Div>
    </>
  );
}