/**
 * Title: 地产详情
 * Routes:
 *   - ./src/pages/routes
 */
import React, { useState } from 'react';
import { connect, DispatchProp, routerRedux } from 'dva';
import { formatMessage } from 'umi-plugin-locale';
import { Button, Modal, Input } from 'antd';
import Header from '@/components/Header';
import ChoiceModal from '@/components/ChoiceModal';
import AccountItem from '@/components/AccountItem';
import { UserModelState } from '@/models/user';

import styles from './style.less';
import { IdentityModelState } from './model';

const idtypes = [
  {key:'idcard', value:'身份证'},
  {key:'passport', value:'护照'}]

const IdentityPage: React.FC<DispatchProp & UserModelState & IdentityModelState> = ({
  dispatch,
  user,
  kyc1success,
  nameInput,
  kyc1Submitting
}) => {

  const [idtypesVisible, setIdtypesVisible] = useState(false);

  const onItemSelected = (key: string) => {
    setIdtypesVisible(false);
//    dispatch({ type: 'user/changeIdtype', payload: key });
  };

  const idtypeModal = (
    <ChoiceModal
      closable={false}
      data={idtypes}
      selectedKey='idcard'
      onItemSelected={onItemSelected}
      visible={idtypesVisible}
      onCancel={() => setIdtypesVisible(false)}
      title={formatMessage({ id: 'identity.chooseIdtype' })}
    />
  );

  return (
    <div className={styles.container}>
      <Header
        className={styles.header}
        title={formatMessage({ id: 'identity.title' })}
      />
      {user && <div className={styles.content}>
        <input className={styles.myinput}
          placeholder={formatMessage({ id: 'identity.realname' })}
          name="realname"
          value={user.realname}
          onChange={e => dispatch({ type: 'identity/onUpdateState', realname: e.target.value })}
        />
        <AccountItem
          className="group"
          title="identity.nationality"
          message={user.nationality}
//          preview={fromLangToText(lang)}
//          onClick={() => setNationsVisible(true)}
        />
        <AccountItem
          className="group"
          title="identity.idtype"
          message={user.idtype}
//          preview={fromLangToText(lang)}
          onClick={() => setIdtypesVisible(true)}
        />
        <input className={styles.myinput}
          placeholder={formatMessage({ id: 'identity.idcode' })}
          name="idcode"
          value={user.idcode}
          onChange={e => dispatch({ type: 'identity/onUpdateState', idcode: e.target.value })}
        />
        <AccountItem
          className="group"
          title="identity.idphoto"
//          onClick={() => dispatch(routerRedux.push('/lgpwd'))}
        />
        <div className={styles.prompt}>
          <div>一级认证未能通过审核，原因为：</div>
          <div>后台返回的理由</div>
          <div>请重新提交。</div>
        </div>
        <Button
          className={styles.myinput}
          type="primary"
          size="large"
          loading={kyc1Submitting}
          onClick={() => dispatch({ type: 'identity/kyc1submit' })}
        >{formatMessage({ id: user.kyc1success ? 'identity.kyc1btn2' : 'identity.kyc1btn' })}</Button>
      </div>}
    </div>
  );
};

export default connect(
  ({ user, identity }: any) => ({ ...user, ...identity }),
)(IdentityPage);