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

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

const FundpwdPage: React.FC<DispatchProp & FundpwdModelState & UserModelState> = ({
  dispatch,
  pageState,
  origin,
  originVisible,
  newPwd,
  confirm,
  submitting,
}) => {
  useEffect(() => {
    dispatch({ type: 'fundpwd/load' });
  }, []);
  let body;
  if (pageState === PageState.Pending) {
    body = (
      <Spin className={styles.none} />
    );
  } else if (pageState === PageState.Failure) {
    body = (
      <div className={styles.none}>{formatMessage({ id: 'common.loadError' })}</div>
    );
  } else if (pageState === PageState.Success) {
    body = (
      <>
        {originVisible && <Input
          className={styles.input}
          value={origin}
          onChange={e => dispatch({ type: 'fundpwd/onUpdateState', origin: e.target.value })}
          placeholder={formatMessage({ id: 'fundpwd.origin' })}
          type="password"
          size="large"
        />}
        <Input
          className={styles.input}
          value={newPwd}
          onChange={e => dispatch({ type: 'fundpwd/onUpdateState', newPwd: e.target.value })}
          placeholder={formatMessage({ id: 'fundpwd.new' })}
          type="password"
          size="large"
        />
        <Input
          className={styles.input}
          value={confirm}
          onChange={e => dispatch({ type: 'fundpwd/onUpdateState', confirm: e.target.value })}
          placeholder={formatMessage({ id: 'fundpwd.confirm' })}
          type="password"
          size="large"
        />
        <Button
          className={styles.input}
          type="primary"
          size="large"
          loading={submitting}
          onClick={() => dispatch({ type: 'fundpwd/submit' })}
        >{formatMessage({ id: 'fundpwd.btn' })}</Button>
      </>
    );
  }

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

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

export default connect(
  ({ fundpwd }: any) => ({ ...fundpwd }),
)(FundpwdPage);
