import React, { useEffect } from 'react';
import { connect, DispatchProp, routerRedux } from 'dva';
import { Spin, Icon } from 'antd';
import { formatMessage } from 'umi-plugin-locale';
import { HomeMineModelState } from './model';
import { MineStatus, Mine } from '@/types/common';
import { dispatch } from '@/utils/utils';

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

const MinePage: React.FC<HomeMineModelState & DispatchProp> = ({
  dispatch,
  refreshingList,
  errorList,
  data,
  refreshingBasic,
  errorBasic,
  info,
}) => {

  useEffect(() => {
    if (!data || errorList || !info || errorBasic) {
      dispatch({ type: 'homeMine/load' });
    }
  }, []);

  const onRefresh = () => {
    if (refreshingBasic || refreshingList) return;
    dispatch({ type: 'homeMine/refresh' });
  };

  const renderBanner = (
    <div className={styles.banner}>
      <div className="bg" />
      <span className="title">{formatMessage({ id: 'home.mine.lastday' })}</span>
      <span className="content">
        <span className="large">+{info ? info.revenueLastday : 0}</span>
        VIC
      </span>
      <div className={styles.card}>
        <div className="left">
          <span className="line">
            <span className="title2">{formatMessage({ id: 'home.mine.acc' })}</span>
            <span className="value">{info ? info.revenueAll : 0} VIC</span>
          </span>
          <span className="line">
            <span className="title2">{formatMessage({ id: 'home.mine.valid' })}</span>
            <span className="value">{info ? info.activeFund : 0} KG</span>
          </span>
        </div>

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

  const renderItem = (it: Mine) => (
    <div className={styles.item} key={it.id}>
      <div className="line">
        <div>{formatMessage({ id: 'home.mine.validTime' })}{displayTime(it.createdAt)}</div>
        <div className="amount">+{it.amount} KG</div>
      </div>
      <div className="line">
        <div>
          {formatMessage({ id: 'home.mine.status' })}
          {formatMessage({ id: `home.mine.status${it.status}` })}
        </div>
        <div className="small">{formatMessage({ id: 'home.mine.invalidTime' })}{displayTime(it.expiresAt)}</div>
      </div>
    </div>
  );

  let body;
  if (data) {
    if (data.length) {
      body = data.map(renderItem);
    } else {
      body = (
        <div className={styles.message}>
          {formatMessage({ id: 'home.mine.none' })}
        </div>
      );
    }
  } else {
    body = (
      <div className={styles.message}>
        {formatMessage({ id: errorList ? 'common.loadError' : 'common.loading' })}
      </div>
    );
  }

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

      <div className={styles.controller}>
        <div className="content" onClick={onRefresh}>
          <Icon type="sync" spin={refreshingBasic || refreshingList} />
          <span className="desc">{formatMessage({ id: 'home.mine.refresh' })}</span>
        </div>
      </div>

      <Spin className={styles.list} spinning={refreshingList}>
        {body}
      </Spin>
    </div>
  );
};

export default connect(
  ({ homeMine } : any) => ({ ...homeMine }),
)(MinePage);