import React, { useEffect } from 'react';
import { connect, DispatchProp, routerRedux } from 'dva';
import _ from 'lodash';
import { formatMessage } from 'umi-plugin-locale';
import FittedImage from 'react-fitted-image';
import { HomeCommunityModelState } from './model';
import { Inviter } from '@/types/common';
import Label from '@/components/Label';
import List from '@/components/List';
import { dispatch } from '@/utils/utils';

import styles from './style.less';
import { displayPhone } from '@/utils/transform';

const CommunityPage: React.FC<HomeCommunityModelState & DispatchProp> = ({
  dispatch,
  refreshingList,
  loadingList,
  loadingFinished,
  errorList,
  data,
  refreshingBasic,
  errorBasic,
  info,
}) => {

  useEffect(() => {
    if (!data || errorList) {
      dispatch({ type: 'homeCommunity/loadList', payload: true });
    }
    if (!info || errorBasic) {
      dispatch({ type: 'homeCommunity/loadBasic' });
    }
  }, []);

  const onRefresh = () => {
    if (refreshingBasic || refreshingList) return;
    dispatch({ type: 'homeCommunity/loadList', payload: true });
    dispatch({ type: 'homeCommunity/loadBasic' });
  };

  const renderBanner = (
    <div className={styles.banner}>
      <div className="bg" />
      <span className="title">{formatMessage({ id: 'home.community.total' })}</span>
      <span className="content">
        <span className="large">+{info ? info.reward : 0} USDT</span>
      </span>
      <div className={styles.card}>
        <div className="left">
          <span className="line">
            {formatMessage({
              id: 'home.community.totalInvited',
            }, {
              num: info ? info.follower : 0,
            })}
          </span>
          <span className="line">
            {formatMessage({
              id: 'home.community.totalAll',
            }, {
              num: info ? info.groupScale : 0,
            })}
          </span>
        </div>

        <div
          className="right app-btn"
          onClick={() => dispatch(routerRedux.push('/invite'))}
        >
          {formatMessage({ id: 'home.community.invite' })}
        </div>
      </div>
    </div>
  );

  const renderItem = (it: Inviter) => (
    <div className={styles.item} key={it.id}>
      <div className="avatar">
        {it.avatar ? <FittedImage
          src={it.avatar}
          fit="cover"
        /> : <div className="fake">{(it.nickname && it.nickname[0]) || _.last(it.phone) || 'F'}</div>}
      </div>
      <div className="line">
        <span>{it.nickname || displayPhone(it.phone)}</span>
        <span className="time">{formatMessage({ id: 'home.community.time' })}{it.createdAt}</span>
      </div>
    </div>
  );

  return (
    <div className={styles.container}>
      {renderBanner}

      <Label
        className={styles.controller}
        name={formatMessage({ id: 'home.community.title' })}
      />

      <List
        className={styles.list}
        data={data || []}
        renderItem={renderItem}
        refreshing={refreshingList}
        onRefresh={onRefresh}
        loading={loadingList}
        enableLoading={!loadingFinished}
        onLoadMore={() => dispatch({ type: 'homeCommunity/loadList' })}
        itemKey={data => data.id}
        itemSize={60}
      />
    </div>
  );
};

export default connect(
  ({ homeCommunity } : any) => ({ ...homeCommunity }),
)(CommunityPage);