/**
 * Title: 邀请新人
 * Routes:
 *   - ./src/pages/routes
 */
import React, { useEffect } from 'react';
import { connect, DispatchProp } from 'dva';
import { Button, Input } from 'antd';
import { formatMessage } from 'umi-plugin-locale';
import { LgpwdModelState } from './model';
import Header from '@/components/Header';

import styles from './style.less';
import { UserModelState } from '@/models/user';

const LgpwdPage: React.FC<DispatchProp & LgpwdModelState & UserModelState> = ({
  dispatch,
  origin,
  newPwd,
  confirm,
  submitting,
}) => {
  useEffect(() => {
    dispatch({ type: 'lgpwd/load' });
  }, []);
  let body = (
    <>
      <Input
        className={styles.input}
        value={origin}
        onChange={e => dispatch({ type: 'lgpwd/onUpdateState', origin: e.target.value })}
        placeholder={formatMessage({ id: 'lgpwd.origin' })}
        type="password"
        size="large"
      />
      <Input
        className={styles.input}
        value={newPwd}
        onChange={e => dispatch({ type: 'lgpwd/onUpdateState', newPwd: e.target.value })}
        placeholder={formatMessage({ id: 'lgpwd.new' })}
        type="password"
        size="large"
      />
      <Input
        className={styles.input}
        value={confirm}
        onChange={e => dispatch({ type: 'lgpwd/onUpdateState', confirm: e.target.value })}
        placeholder={formatMessage({ id: 'lgpwd.confirm' })}
        type="password"
        size="large"
      />
      <Button
        className={styles.input}
        type="primary"
        size="large"
        loading={submitting}
        onClick={() => dispatch({ type: 'lgpwd/submit' })}
      >{formatMessage({ id: 'lgpwd.btn' })}</Button>
    </>
  );

  return (
    <div className={styles.container}>
      <Header
        className="header"
        title={formatMessage({ id: 'lgpwd.title' })}
      />

      <div className={styles.body}>
        {body}
      </div>
    </div>
  );
};

export default connect(
  ({ lgpwd }: any) => ({ ...lgpwd }),
)(LgpwdPage);
