import { Text, View } from "@tarojs/components";
import "./index.scss";
import { Button, Form, Input } from "@nutui/nutui-react-taro";
import { verifyPhone } from "../../utils";
import { sendCodeApi, smsLoginApi } from "../../api/auth";
import { setStorageSync, redirectTo } from "@tarojs/taro";
import { useState } from "react";

const LoginIndex = () => {
  const [form] = Form.useForm();
  const [showCode, setShowCode] = useState(false);
  const mobile = Form.useWatch("mobile", form);
  const code = Form.useWatch("code", form);
  /**
   * 发送验证码
   */
  const sendCode = async () => {
    console.log(mobile);
    setShowCode(true);
    await sendCodeApi({ mobile }).then((res) => {
      console.log(res);
    });
  };
  /**
   * 短信登录
   */
  const smsLogin = async () => {
    await smsLoginApi({ mobile, code }).then((res: any) => {
      const { data } = res;
      const {
        token,
        username,
        mobile,
        is_vip,
        vip_code,
        vip_info,
        circle_info,
      } = data;
      setStorageSync("Authorization", token);
      setStorageSync("User", { username, mobile, is_vip, vip_code });
      setStorageSync("vipInfo", vip_info);
      setStorageSync("circleInfo", circle_info);
      redirectTo({ url: "/pages/index/index" });
    });
  };

  return (
    <View className="login-page">
      <View className="login-contain">
        <View className="text-[16px] font-bold text-center">手机号登录</View>
        <Form form={form}>
          {!showCode && (
            <Form.Item name="mobile">
              <Input placeholder="手机号码" className="input-box" />
            </Form.Item>
          )}

          {/* <View className="flex flex-wrap justify-between items-center bg-[#ffffff] relative w-full"> */}
          {showCode && (
            <Form.Item name="code">
              <Input placeholder="请输入短信验证码" className="input-box" />
            </Form.Item>
          )}

          {/* <Button
              type="primary"
              disabled={!verifyPhone(mobile)}
              size="small"
              className="flex-shrink-1 absolute right-0"
              onClick={() => sendCode()}
            >
              <Text className="text-[12px] text-[#ffffff]">获取验证码</Text>
            </Button> */}
          {/* </View> */}
        </Form>
        <View className="mt-[22px]">
          {showCode ? (
            <Button
              size="large"
              block
              type="primary"
              disabled={!verifyPhone(mobile) || !code}
              onClick={() => smsLogin()}
            >
              登录
            </Button>
          ) : (
            <Button
              size="large"
              block
              type="primary"
              disabled={!verifyPhone(mobile)}
              className="flex-shrink-1 absolute right-0"
              onClick={() => sendCode()}
            >
              下一步
            </Button>
          )}
        </View>
      </View>
    </View>
  );
};

export default LoginIndex;