import { useDeviceFingerprint } from '@/hooks/useDeviceFingerprint';
import { usercontrollerGetuser, usercontrollerLogin } from '@/servers/api/user';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import {
  LoginFormPage,
  ProConfigProvider,
  ProFormText,
} from '@ant-design/pro-components';
import { history, useModel } from '@umijs/max';
import { App, theme } from 'antd';
import { useState } from 'react';

const Page = () => {
  const { setInitialState } = useModel('@@initialState');
  const { token } = theme.useToken();
  const { message } = App.useApp();
  const deviceId = useDeviceFingerprint();
  const [isAuth, setIsAuth] = useState(false);

  console.log(deviceId);

  const onFinish = async (values: { username: string; password: string }) => {
    try {
      const {
        data,
        success,
        code,
        message: msg,
      } = await usercontrollerLogin({ ...values, deviceId });
      if (success) {
        message.success('登录成功');
        localStorage.setItem('token', data?.token as string);
        const { data: user } = await usercontrollerGetuser();
        setInitialState({ user });
        history.push('/');
        return;
      }
      if (code === 10001) {
        message.info('验证码已发送至管理邮箱');
        setIsAuth(true);
        return;
      }
      message.error(msg);
    } catch {
      message.error('登录失败');
    }
  };
  return (
    <div
      style={{
        backgroundColor: 'white',
        height: '100vh',
      }}
    >
      <LoginFormPage
        backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
        backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
        title="Yoone"
        containerStyle={{
          backgroundColor: 'rgba(0, 0, 0,0.65)',
          backdropFilter: 'blur(4px)',
        }}
        onFinish={onFinish}
      >
        <ProFormText
          name="username"
          fieldProps={{
            size: 'large',
            prefix: (
              <UserOutlined
                style={{
                  color: token.colorText,
                }}
                className={'prefixIcon'}
              />
            ),
          }}
          placeholder={'请输入用户名!'}
          rules={[
            {
              required: true,
              message: '请输入用户名!',
            },
          ]}
        />
        <ProFormText.Password
          name="password"
          fieldProps={{
            size: 'large',
            prefix: (
              <LockOutlined
                style={{
                  color: token.colorText,
                }}
                className={'prefixIcon'}
              />
            ),
          }}
          placeholder={'请输入密码!'}
          rules={[
            {
              required: true,
              message: '请输入密码!',
            },
          ]}
        />
        {isAuth ? (
          <ProFormText
            name="authCode"
            label="验证码"
            width="lg"
            placeholder="请输入验证码"
            rules={[{ required: true, message: '请输入验证码' }]}
          />
        ) : (
          <></>
        )}
        {/* <div
          style={{
            marginBlockEnd: 24,
          }}
        >
          <ProFormCheckbox noStyle name="autoLogin">
            自动登录
          </ProFormCheckbox>
          <a
            style={{
              float: 'right',
            }}
          >
            忘记密码
          </a>
        </div> */}
      </LoginFormPage>
    </div>
  );
};

export default () => {
  return (
    <ProConfigProvider>
      <Page />
    </ProConfigProvider>
  );
};