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

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

type EmptyProps = {
  /** 类型 */
  type: EmptyType;
  /** 标题 */
  title?: string;
  /** 内容 */
  content?: string;
  /** 是否有页脚，如果有默认是一个按钮 */
  hasFooter?: boolean;
  /** 按钮标题，默认是"刷新" */
  buttonTitle?: string;
  /** 按钮点击回调 */
  onButtonClick?: () => void;
  /** 自定义页脚内容 */
  footer?: () => React.ReactNode;
  /** 自定义类名 */
  className?: string;
  /** 自定义样式 */
  style?: React.CSSProperties;
};

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 = '刷新',
  onButtonClick,
}: 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__button" type="primary" onClick={onButtonClick}>
              {buttonTitle}
            </Button>
          )}
        </div>
      )}
    </div>
  );
}

export default KFEmpty;
