import React, { PureComponent } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import Icon from '../../icon/index';
// @require '../style/index.scss'

class Statusbox extends PureComponent {

  static propTypes = {
    children: PropTypes.any,
    style: PropTypes.object,
    className: PropTypes.string,
    /**
     * 是否可见
     */
    visible: PropTypes.bool,
    /**
     * 是否自定义，支持多行
     */
    custom: PropTypes.bool,
    /**
     * 尺寸
     */
    size: PropTypes.oneOf(['l', 'm', 's']),
    /**
     * 类型
     */
    type: PropTypes.oneOf(['info', 'success', 'alert', 'question', 'loading']),
  };

  static defaultProps = {
    visible: true,
    custom: false,
    size: 'm',
    type: 'info',
  };

  render() {
    const { children, style, className, visible, size, type, custom } = this.props;
    let cssClass = classnames(
      'im-statusbox',
      `im-statusbox-${size}`,
      className,
      { 'im-statusbox--simple': !custom },
      { 'im-statusbox--custom': custom },
    );
    if (visible) {
      return (
        <div className={cssClass} style={style}>
          <div className="im-statusbox-icon"><Icon type={type} /></div>
          <div className="im-statusbox-bd">{children}</div>
        </div>
      );
    }
    return null;
  }
}

export default Statusbox;