import React, { useEffect } from 'react';
import { connect, DispatchProp, routerRedux } from 'dva';
import { Spin, Icon } from 'antd';
import { formatMessage } from 'umi-plugin-locale';
import { HomeFundModelState } from './model';
import { Journal, JournalOp } from '@/types/common';
import Label from '@/components/Label';
import List from '@/components/List';

import styles from './style.less';
import { isApp } from '@/utils/h5plus';
import { displayTime } from '@/utils/transform';

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

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

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

  const renderBanner = (
    <div className={styles.banner}>
      <div className="bg" />
      <span className="title">{formatMessage({ id: 'home.fund.total' })}</span>
      <span className="content">
        <span className="large">
          {info ? (info.vic || 0) : 0} VIC
        </span>
      </span>
      <div className={styles.card}>
        <div
          className="app-btn"
          onClick={() => dispatch({ type: 'homeFund/gotoDraw' })}
        >
          {loadingDraw ? <Spin size="small" /> : formatMessage({ id: 'home.fund.draw' })}
        </div>
      </div>
    </div>
  );

  const renderItem = (it: Journal) => (
    <div className={styles.item} key={it.id}>
      <div className="line">
        <div>{formatMessage({ id: `home.fund.type${it.type}` })}</div>
        <div className={`amount ${it.op === JournalOp.Income ? 'active' : ''}`}>
          {it.op === JournalOp.Income ? '+' : '-'}{it.amount}&nbsp;
          {(it.tokenType || '').toUpperCase()}
        </div>
      </div>
      <div className="line">
        <div className="detail">
          {it.detail}
        </div>
        <div className="small">{displayTime(it.createdAt)}</div>
      </div>
    </div>
  );

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

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

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

export default connect(
  ({ homeFund } : any) => ({ ...homeFund }),
)(FundPage);
