import React from 'react';
import { Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';

import styles from './index.less';
import VisibilitySensor from 'react-visibility-sensor';
import classNames from '@pansy/classnames';

export enum LoadState {
  isLoading = 'isLoading',
  noMore = 'noMore',
  isFailed = 'isFailed'
}

interface IProps {
  loadState: LoadState;
  onChange: (isVisible: boolean) => void;
}

// 外层容器最好设置 flex 布局，此时数据为空是 空白站位图片及文字才能垂直居中显示，否则将显示在容器顶部
const LoadMoreList = (props: IProps) => {
  const { loadState, onChange } = props;
  function getLoadContent() {
    if (loadState == LoadState.isFailed) {
      return (
        <div className={classNames(styles.loadingContainer, styles.center)}>
          加载失败，
          <a
            onClick={() => {
              onChange(true);
            }}
          >
            重新加载
          </a>
        </div>
      );
    } else if (loadState === LoadState.noMore) {
      return <div className={classNames(styles.loadingContainer, styles.center)}>没有更多了</div>;
    } else if (loadState === LoadState.isLoading) {
      return (
        <div className={classNames(styles.loadingContainer, styles.center)}>
          <Spin
            indicator={
              <span style={{ fontSize: 16, width: 300 }}>
                <LoadingOutlined spin />
                <span style={{ marginLeft: 16, fontSize: 14, color: 'rgba(0,0,0, .45)' }}>
                  加载中
                </span>
              </span>
            }
          />
        </div>
      );
    } else {
      return;
    }
  }
  return (
    <div style={{ minHeight: 128 }}>
      <VisibilitySensor onChange={onChange}>
        <div style={{ height: '100%' }}>{getLoadContent()}</div>
      </VisibilitySensor>
    </div>
  );
};

export default LoadMoreList;