/* eslint-disable react/forbid-prop-types */
/* eslint-disable react/static-property-placement */
/* eslint-disable react/prefer-stateless-function */
import React from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';

import i18n from './i18n';
import './style/index.scss';

const i18nDefault = 'zh-cn';

const EmptyData = (props) => {
  const {
    prefixCls,
    children,
    icon,
    iconSmall,
    iconLarge,
    style,
    type,
    className,
  } = props;

  const iconMap = {
    small: iconSmall,
    medium: icon,
    large: iconLarge,
  };

  return (
    <div
      className={classnames({ [`${prefixCls} ${type}`]: true }, { [className]: !!className })}
      style={style}
    >
      <div
        className={`${prefixCls}-icon`}
        style={{
          backgroundImage: `url(${iconMap[type]})`,
        }}
      />
      <div className={`${prefixCls}-content`}>
        {children}
      </div>
    </div>
  );
};

EmptyData.propTypes = {
  children: PropTypes.any,
  icon: PropTypes.string,
  iconSmall: PropTypes.string,
  iconLarge: PropTypes.string,
  prefixCls: PropTypes.string,
  style: PropTypes.object,
  className: PropTypes.string,
  type: PropTypes.oneOf(['small', 'medium', 'large']),
};

EmptyData.defaultProps = {
  children: i18n[i18nDefault].description,
  iconSmall: '//web.ewt360.com/common/eui/images/empty.png',
  icon: '//web.ewt360.com/common/eui/images/empty.png',
  iconLarge: '//web.ewt360.com/common/eui/images/empty.png',
  prefixCls: 'ewt-empty-data',
  style: {},
  className: '',
  type: 'medium',
};