import React from 'react';
import classnames from 'classnames';
import AntdEmpty from 'antd/es/empty';
import DefaultEmptyImg from 'antd/es/empty/empty';
import SimpleEmptyImg from 'antd/es/empty/simple';
import { ConfigConsumer } from '../config-provider';
import Button from '../button';
import EmptyTable from '../../icons/empty-table.svg';
import './index.less';

const PRESENTED_IMAGE_DEFAULT = props => (
  <ConfigConsumer>
    {({ getPrefixCls }) => {
      const { prefixCls: customizePrefixCls, ...restProps } = props;
      const prefixCls = getPrefixCls('empty-img-default', customizePrefixCls);
      return <DefaultEmptyImg {...restProps} prefixCls={prefixCls} />;
    }}
  </ConfigConsumer>
);

const PRESENTED_IMAGE_SIMPLE = props => (
  <ConfigConsumer>
    {({ getPrefixCls }) => {
      const { prefixCls: customizePrefixCls, ...restProps } = props;
      const prefixCls = getPrefixCls('empty-img-simple', customizePrefixCls);
      return <SimpleEmptyImg {...restProps} prefixCls={prefixCls} />;
    }}
  </ConfigConsumer>
);

class Empty extends React.Component {
  renderEmpty = ({ getPrefixCls }) => {
    const {
      prefixCls: customizePrefixCls,
      type = 'default',
      insertValue = '',
      handleReload = () => {},
      className,
      ...restProps
    } = this.props;
    const prefixCls = getPrefixCls('empty', customizePrefixCls);
    return (
      <>
        {type === 'search' ? (
          <AntdEmpty
            className={classnames(`${prefixCls}-search`, className)}
            image={<EmptyTable />}
            {...restProps}
            description={
              <span>
                {insertValue.length > 0
                  ? `搜索“${insertValue}”无结果，`
                  : '搜索无结果，'}
                <Button type="link" onClick={handleReload}>
                  返回原列表
                </Button>
              </span>
            }
            prefixCls={prefixCls}
          />
        ) : (
          <AntdEmpty
            image={
              type === 'table' ? <EmptyTable /> : <PRESENTED_IMAGE_DEFAULT />
            }
            {...restProps}
            prefixCls={prefixCls}
          />
        )}
      </>
    );
  };

  render() {
    return <ConfigConsumer>{this.renderEmpty}</ConfigConsumer>;
  }
}

Empty.PRESENTED_IMAGE_DEFAULT = <PRESENTED_IMAGE_DEFAULT />;
Empty.PRESENTED_IMAGE_SIMPLE = <PRESENTED_IMAGE_SIMPLE />;

export default Empty;