import React, {useEffect, useCallback} from 'react';
import {message, Form} from 'antd';
import {UserOutlined, LockOutlined} from '@ant-design/icons';
import UserCache from '@caches/UserCache';
import md5 from 'blueimp-md5';
import {inQb, getUser} from 'frc-core-pro';
import {Loading, Button, Input} from 'frc-ui-pro';
import {useSelector} from 'react-redux';
import {FetchResult} from '@constants/types';
import trim from 'lodash/trim';
import Action from '@actions';
import axios from '@utils/axios';
import './login.less';

interface IProps {
  prefixCls: string;
  title: string;
  location: any;
}

const Login: React.FC<IProps> = (props) => {
  const {prefixCls = 'ss', title = '', location} = props;
  const loginData: FetchResult = useSelector((state: any) => state.user.login);
  const [form] = Form.useForm();

  const handleSubmit = useCallback(() => {
    form.validateFields().then(({username, password}) => {
      UserCache.login({username: trim(username), password: md5(trim(password))});
    });
  }, [form]);

  useEffect(() => {
    if (inQb()) {
      getUser(UserCache.login);
    }
  }, []);

  useEffect(() => {
    if (title) {
      window.document.title = title;
    }
  }, [title]);

  useEffect(() => {
    if (loginData?.success) {
      UserCache.user = loginData.result;
      axios.defaults.headers.common['userId'] = UserCache.user.userId;
      if (location && location.state) {
        Action.push(location.state);
      } else {
        Action.push('/demo');
      }
    } else if (loginData?.fail) {
      message.error(loginData?.message || '登录失败');
    }
  }, [loginData, location]);

  return inQb() ? (
    <Loading />
  ) : (
    <div className={`${prefixCls}-login`}>
      <div className={`${prefixCls}-login-container`}>
        <Form style={{width: '100%'}} requiredMark={false} form={form} wrapperCol={{span: 24}}>
          <Form.Item name='username' rules={[{required: true, whitespace: true, message: '请输入用户名'}]}>
            <Input prefix={<UserOutlined />} placeholder='Username' onPressEnter={handleSubmit} />
          </Form.Item>
          <Form.Item name='password' rules={[{required: true, whitespace: true, message: '请输入密码'}]}>
            <Input prefix={<LockOutlined />} type='password' placeholder='Password' onPressEnter={handleSubmit} />
          </Form.Item>
        </Form>
        <Button type='primary' htmlType='submit' onClick={handleSubmit}>
          登录
        </Button>
      </div>
    </div>
  );
};

export default Login;