import { Button } from 'antd';
import classNames from 'classnames';
import './index.less';

export enum EmptyType {
  NoData = 'NoData',
  NotFound = 'NotFound',
  Developing = 'Developing',
}

type EmptyProps = {
  className?: string;
  style?: React.CSSProperties;
  type: EmptyType;
  title?: string;
  content?: string;
  hasFooter?: boolean;
  footer?: () => React.ReactNode;
  buttonTitle?: string;
  onRefresh?: () => void;
};

function getEmptyImage(type: EmptyType) {
  switch (type) {
    case EmptyType.NoData:
      return require('@/assets/img/no-data.png');
    case EmptyType.NotFound:
      return require('@/assets/img/404.png');
    case EmptyType.Developing:
      return require('@/assets/img/missing-back.png');
  }
}

function KFEmpty({
  className,
  style,
  type,
  title,
  content,
  hasFooter = true,
  footer,
  buttonTitle = '刷新',
  onRefresh,
}: EmptyProps) {
  const image = getEmptyImage(type);

  return (
    <div className={classNames('kf-empty', className)} style={style}>
      <img className="kf-empty__image" src={image} draggable={false} alt="" />
      <div className="kf-empty__title">{title}</div>
      <div className="kf-empty__content">{content}</div>
      {hasFooter && (
        <div className="kf-empty__footer">
          {footer ? (
            footer()
          ) : (
            <Button className="kf-empty__footer__back-btn" type="primary" onClick={onRefresh}>
              {buttonTitle}
            </Button>
          )}
        </div>
      )}
    </div>
  );
}

export default KFEmpty;
