import React from "react";
import { definePageConfig, history, useAuth, useLoginState } from "ice";
import { message, Form } from "antd";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { ProFormText, LoginForm, ProFormCaptcha } from "@ant-design/pro-form";
import styles from "./index.module.css";
import type { LoginParams, LoginResult } from "@/interfaces/user";
import store from "@/store";
import logo from "@/assets/logo.png";
import { NoLayout } from "../../annotate/NoLayout";
import { proxyApi } from "@/apis";

const Login: React.FC = () => {
  const [, userDispatcher] = store.useModel("user");
  const [form] = Form.useForm();
  const [, setAuth] = useAuth();
  const [, setLoginState] = useLoginState();

  async function handleSubmit(values: LoginParams) {
    try {
      const userInfo = (await proxyApi.auth.login(values)) as LoginResult;
      if (userInfo) {
        message.success("登录成功！");
        const roles = userInfo.roles?.split(",") || [];
        const roleMap = {};
        roles.forEach((name) => {
          roleMap[name] = true;
        });
        setAuth(roleMap);
        setLoginState(true);
        userDispatcher.updateCurrentUser({
          ...userInfo,
          roles,
          isDesigner: userInfo.roles.indexOf("designer") > -1,
        });
        const urlParams = new URL(window.location.href).searchParams;
        history?.push(urlParams.get("redirect") || "/");
        return;
      }
    } catch (error) {
      message.error("登录失败，请重试！");
    }
  }
  return (
    <div className={styles.container}>
      <LoginForm
        title="春天小猪"
        logo={<img alt="logo" src={logo} />}
        subTitle="春天小猪设计者管理后台"
        onFinish={async (values) => {
          await handleSubmit(values as LoginParams);
        }}
        form={form}
      >
        <ProFormText
          name="email"
          fieldProps={{
            size: "large",
            prefix: <UserOutlined className={"prefixIcon"} />,
          }}
          placeholder={"邮箱"}
          rules={[
            {
              required: true,
              message: "请输入邮箱!",
            },
          ]}
        />
        <ProFormCaptcha
          name="code"
          fieldProps={{
            size: "large",
            prefix: <LockOutlined className={"prefixIcon"} />,
          }}
          captchaTextRender={(timing, count) => {
            if (timing) {
              return `${count} 获取验证码`;
            }
            return "获取验证码";
          }}
          placeholder={"验证码"}
          rules={[
            {
              required: true,
              message: "请输入验证码！",
            },
          ]}
          onGetCaptcha={async () => {
            if (!form.getFieldValue("email")) {
              message.error("请输入邮箱");
              return;
            }
            const values = form.getFieldsValue();
            proxyApi.auth
              .queryCode({
                email: values.email,
              })
              .then((res) => {
                if (res) {
                  message.success("验证码获取成功,请在邮箱查收");
                }
              });
          }}
        />
      </LoginForm>
    </div>
  );
};

export const pageConfig = definePageConfig(() => {
  return {
    title: "登录",
    needLogin: false,
  };
});

export default NoLayout(Login);