/**
 * 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 { ChphoneModelState } from './model';
import Header from '@/components/Header';
import AreaSelection from '@/components/AreaSelection';

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

const ChphonePage: React.FC<DispatchProp & ChphoneModelState & UserModelState> = ({
  dispatch,
  pageState,
  areacode,
  areacodes,
  phone,
  code,
  submitting,
  codeTimer,
  sendingCode,
}) => {
  useEffect(() => {
    dispatch({ type: 'chphone/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) {
    let btnText;
    if (codeTimer < 0) {
      btnText = formatMessage({ id: 'check.getCode1' });
    } else if (codeTimer === 0) {
      btnText = formatMessage({ id: 'check.getCode3' });
    } else {
      btnText = formatMessage({ id: 'check.getCode2' }, { time: codeTimer })
    }
    body = (
      <>
        <AreaSelection
          className={styles.input}
          areacode={areacode}
          areacodes={areacodes}
          onChange={areacode => dispatch({ type: 'chphone/onUpdateState', areacode })}
          size="large"
        />
        <Input
          className={styles.input}
          value={phone}
          onChange={e => dispatch({ type: 'chphone/onUpdatePhone', payload: e.target.value })}
          placeholder={formatMessage({ id: 'chphone.new' })}
          size="large"
          type="tel"
        />
        <Input.Group
          className={styles.input}
          compact={true}
          size="large"
        >
          <Input
            style={{ width: '40%' }}
            placeholder={formatMessage({ id: 'chphone.code' })}
            value={code}
            onChange={e => dispatch({ type: 'chphone/onUpdateState', code: e.target.value })}
          />
          <Button
            style={{ width: '60%' }}
            size="large"
            loading={sendingCode}
            disabled={codeTimer > 0}
            onClick={() => dispatch({ type: 'chphone/sendCode' })}
          >{btnText}</Button>
        </Input.Group>

        <Button
          className={styles.input}
          type="primary"
          size="large"
          loading={submitting}
          onClick={() => dispatch({ type: 'chphone/submit' })}
        >{formatMessage({ id: 'chphone.btn' })}</Button>
      </>
    );
  }

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

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

export default connect(
  ({ chphone }: any) => ({ ...chphone }),
)(ChphonePage);
