import React, { useState, useEffect } from 'react';
import { message, Form, Input, Button } from 'antd';
import styles from './style.less';
import { connect } from 'umi';

interface Password {
  password: string;
}

const Login2 = (props: {
  history: { push: (location: string) => void };
  result: React.SetStateAction<boolean>;
  dispatch: any;
  userName: string;
}) => {
  const { history, result, dispatch, userName } = props;
  console.log(userName);

  const [resetPwd, setResetPwd] = useState(false);

  useEffect(() => {
    setResetPwd(result);
  }, [result]);

  useEffect(() => {
    if (!userName) {
      history.push('/user/login');
    }
  }, []);

  // 修改密码
  const onFinish = (values: Password) => {
    console.log('修改密码');
    dispatch({
      type: 'login/reset',
      payload: {
        tosUserName: userName,
        tosUserPwd: values.password,
      },
    });
  };

  return (
    <div>
      <Form layout="vertical" onFinish={onFinish} requiredMark={false}>
        <Form.Item
          name="password"
          label="Password"
          rules={[
            {
              required: true,
              message: 'Please input your password!',
            },
          ]}
          hasFeedback
          className={styles.passStyle}
        >
          <Input.Password bordered={false} />
        </Form.Item>

        <Form.Item
          name="confirm"
          label="Confirm Password"
          dependencies={['password']}
          hasFeedback
          className={styles.passStyle}
          rules={[
            {
              required: true,
              message: 'Please confirm your password!',
            },
            ({ getFieldValue }) => ({
              validator(rule, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
                }
                return Promise.reject('The two passwords that you entered do not match!');
              },
            }),
          ]}
        >
          <Input.Password bordered={false} />
        </Form.Item>
        <Form.Item className={styles.passBtn}>
          <Button size="large" type="primary" shape="round" htmlType={'submit'}>
            {resetPwd ? 'Submit' : 'Accomplish'}
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

function map(state: { login: { result: boolean; userName: string } }) {
  const { result, userName } = state.login;
  return { result, userName };
}

export default connect(map)(Login2);
