/**
 * @file Badge component
 * @author liangxiaojun(liangxiaojun@derbysoft.com)
 */

import React, {Component} from 'react';
import PropTypes from 'prop-types';

// Statics
import BadgeType from '../_statics/BadgeType';

// Vendors
import classNames from 'classnames';
import Util from '../_vendors/Util';

class Badge extends Component {

    static Type = BadgeType;

    constructor(props, ...restArgs) {
        super(props, ...restArgs);
    }

    /**
     * handle display when value overflow
     * @returns {string}
     */
    handleOverflow = () => {

        const {value, overflowValue, overflowRenderer} = this.props;

        if (!overflowRenderer) {
            return `${overflowValue}+`;
        }

        if (typeof overflowRenderer === 'function') {
            return overflowRenderer?.(value, overflowValue);
        }

        return overflowRenderer;

    };

    /**
     * handle display number
     * @param value
     * @returns {string|null|Number}
     */
    handleValue = (value = this.props.value) => {

        const {type, overflowValue} = this.props;

        if (type !== BadgeType.NUMBER) {
            return null;
        }

        if (overflowValue == null || value <= overflowValue) {
            return value;
        }

        return this.handleOverflow();

    };

    render() {

        const {children, className, style, visible, type} = this.props;

        return (
            <span className={classNames('badge-wrapper', {
                'no-child': !children,
                [className]: className
            })}
                  style={style}>

                {children}

                {
                    visible ?
                        <sup className={classNames('badge', `badge-${type}`)}>
                            {this.handleValue()}
                        </sup>
                        :
                        null
                }

            </span>
        );

    }
}

Badge.propTypes = {

    children: PropTypes.any,

    /**
     * The CSS class name of the root element.
     */
    className: PropTypes.string,

    /**
     * Override the styles of the root element.
     */
    style: PropTypes.object,

    visible: PropTypes.bool,
    type: PropTypes.oneOf(Util.enumerateValue(BadgeType)),
    value: PropTypes.number,
    overflowValue: PropTypes.number,
    overflowRenderer: PropTypes.any

};

Badge.defaultProps = {
    visible: true,
    type: BadgeType.DOT
};

export default Badge;

@@ -1338,16 +1338,30 @@
  const %7B
+%0A%0A            
 children
@@ -1393,16 +1393,150 @@
 le, type
+,%0A%0A            // not passing down these props%0A            value, overflowValue, overflowRenderer,%0A%0A            ...restProps%0A%0A        
 %7D = this
@@ -1579,16 +1579,49 @@
   %3Cspan 
+%7B...restProps%7D%0A                  
 classNam
@@ -1653,16 +1653,22 @@
 per', %7B%0A
+      
         
@@ -1714,16 +1714,22 @@
         
+      
 %5BclassNa
@@ -1743,16 +1743,22 @@
 assName%0A
+      
         
@@ -2479,16 +2479,17 @@
 Type)),%0A
+%0A
     valu

update Badge