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

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

const AccountPage: React.FC<DispatchProp & UserModelState & AccountModelState> = ({
  dispatch,
  user,
  nameEditable,
  nameInput,
  nameSubmitting,
}) => {

  const onLogout = () => {
    Modal.confirm({
      title: formatMessage({ id: 'account.confirm' }),
      onOk: () => dispatch({ type: 'user/logout' }),
      okText: formatMessage({ id: 'common.ok' }),
      cancelText: formatMessage({ id: 'common.cancel' }),
      centered: true,
    });
  };

  const editNameModal = (
    <Modal
      title={formatMessage({ id: 'common.modify' })}
      visible={nameEditable}
      onCancel={() => dispatch({ type: 'account/onUpdateState', nameEditable: false })}
      onOk={() => dispatch({ type: 'account/changeName' })}
      okText={formatMessage({ id: 'common.ok' })}
      cancelText={formatMessage({ id: 'common.cancel' })}
      confirmLoading={nameSubmitting}
    >
      <Input
        size="large"
        placeholder={formatMessage({ id: 'account.nickname' })}
        value={nameInput}
        onChange={e => dispatch({ type: 'account/onUpdateState', nameInput: e.target.value })}
      />
    </Modal>
  );

  return (
    <div className={styles.container}>
      <Header
        className={styles.header}
        title={formatMessage({ id: 'account.title' })}
      />
      {user && <div className={styles.content}>
        <AccountItem
          className="group"
          title="account.nickname"
          message={user.nickname}
          showGo={false}
          onClick={() => dispatch({
            type: 'account/onUpdateState',
            nameEditable: true,
            nameInput: user.nickname,
          })}
        />
        <AccountItem
          className="group"
          title="account.phone"
          message={user.phone}
        />
        <AccountItem
          className="group"
          title="account.email"
          message={user.email}
        />
        <AccountItem
          className="group"
          title="account.loginPwd"
        />
        <Button
          className={styles.logout}
          size="large"
          onClick={onLogout}
        >
          {formatMessage({ id: 'account.logout' })}
        </Button>
      </div>}
      {editNameModal}
    </div>
  );
};

export default connect(
  ({ user, account }: any) => ({ ...user, ...account }),
)(AccountPage);