import React from 'react';
import FittedImage from 'react-fitted-image';
import { connect, DispatchProp, routerRedux } from 'dva';
import _ from 'lodash';
import { UserModelState } from '@/models/user';
import SettingItem from '@/components/SettingItem';
import logoAccount from '@/assets/p_account.png';
import logoSystem from '@/assets/p_system.png';
import logoIdentity from '@/assets/p_identity.png';
import logoMsg from '@/assets/p_msg.png';
import logoAbout from '@/assets/p_about.png';

import styles from './style.less';

const ProfilePage: React.FC<UserModelState & DispatchProp> = ({
  dispatch,
  user,
}) => {

  if (!user) return null;

  const bannerElement = (
    <div className={styles.banner}>
        <div className={styles.info}>
          <div className="avatar">
            {user.avatar ?
              <FittedImage src={user.avatar} fit="cover" /> :
              <span>{user.nickname ? user.nickname[0] : _.last(user.phone)}</span>
            }
          </div>
          <span className="name">{user.nickname || user.phone}</span>
        </div>
      </div>
  );

  return (
    <div className={styles.container}>
      {bannerElement}
      <div className={styles.content}>
        <SettingItem
          className="group"
          logo={logoAccount}
          title="profile.account"
          onClick={() => dispatch(routerRedux.push('/account'))}
        />
        <SettingItem
          className="group"
          logo={logoIdentity}
          title="profile.identity"
          onClick={() => dispatch(routerRedux.push('/identity'))}
        />
        <SettingItem
          className="group"
          logo={logoSystem}
          title="profile.system"
          onClick={() => dispatch(routerRedux.push('/system'))}
        />
        <SettingItem
          className="group"
          logo={logoAbout}
          title="profile.about"
          onClick={() => dispatch(routerRedux.push('/about'))}
        />
      </div>
    </div>
  );
}

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