import { LeftSquareFilled, LockOutlined, UserOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
import { ProFormText, LoginForm } from '@ant-design/pro-form';
import { useIntl, history, FormattedMessage, useModel } from 'umi';
import { login } from '@/services/login';
import defaultSettings from '../../../config/defaultSettings';
import styles from './index.less';
import { CACHE_TOKEN } from '@/constants/cacheKey';

import { initWeb3, walletSign } from '../../utils/web3';

const Login: React.FC = () => {
  const intl = useIntl();
  const handleSubmit = async (values: API.LoginParams) => {
    // 登录
    await initWeb3();
    const signInfo = await walletSign();
    const res: any = await login({ data: signInfo.raw, sign: signInfo.sign });
    localStorage.setItem(CACHE_TOKEN, res.token);
    // const res: any = await login({ ...values });
    // localStorage.setItem(CACHE_TOKEN, res.token);
    /** 此方法会跳转到 redirect 参数所在的位置 */
    if (!history) return;
    const { query } = history.location;
    const { redirect } = query as { redirect: string };
    history.push(redirect || '/');
  };

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <LoginForm
          logo={<img alt="logo" src="/logo.svg" />}
          title={defaultSettings.title as string}
          initialValues={{
            autoLogin: true,
          }}
          onFinish={async (values) => {
            await handleSubmit(values as API.LoginParams);
          }}
        >
          <ProFormText
            name="username"
            fieldProps={{
              size: 'large',
              prefix: <UserOutlined className={styles.prefixIcon} />,
            }}
            placeholder={intl.formatMessage({
              id: 'pages.login.username.placeholder',
              defaultMessage: '用户名',
            })}
            rules={[
              {
                required: true,
                message: (
                  <FormattedMessage
                    id="pages.login.username.required"
                    defaultMessage="请输入用户名!"
                  />
                ),
              },
            ]}
          />
          <ProFormText.Password
            name="password"
            fieldProps={{
              size: 'large',
              prefix: <LockOutlined className={styles.prefixIcon} />,
            }}
            placeholder={intl.formatMessage({
              id: 'pages.login.password.placeholder',
              defaultMessage: '密码',
            })}
            rules={[
              {
                required: true,
                message: (
                  <FormattedMessage
                    id="pages.login.password.required"
                    defaultMessage="请输入密码！"
                  />
                ),
              },
            ]}
          />
        </LoginForm>
      </div>
    </div>
  );
};

export default Login;