/** @jsx createElement */

/**
 * Copyright (c) 2015-present, Alibaba Group Holding Limited.
 * All rights reserved.
 *
 * @providesModule
 */

'use strict';

import { createElement, Component, PropTypes } from 'rax';
import { connectStyle } from 'nuke-theme-provider';
import View from 'nuke-view';
import Text from 'nuke-text';
import Touchable from 'nuke-touchable';
import stylesProvider from '../styles';

class Badge extends Component {
  constructor(props) {
    super(props);
    this.onPress = this.onPress.bind(this);
    this.renderInnerText = this.renderInnerText.bind(this);
  }
  onPress() {
    const { onPress } = this.props;
    onPress && onPress();
  }
  renderInnerText(hidden, textStyle, sup) {
    const { renderBadge } = this.props;
    if (!renderBadge) {
      if (!hidden) {
        return <Text style={textStyle}>{sup}</Text>;
      }
      return null;
    }
    return renderBadge();
  }
  render() {
    const { max, count, type, children, always, style = {}, renderBadge } = this.props;
    const styles = this.props.themeStyle;
    let sup = count;
    let hidden = false;

    sup = Number(count);

    if (!isNaN(sup)) {
      sup = sup > max ? `${max}+` : count;
      (sup === 0 || sup === '0') && !always && (hidden = true);
    } else {
      sup = count; // for string
    }
    const wrapStyle = Object.assign(
      {},
      styles.wrap,
      styles[`${type}-span`],
      sup || always ? styles['number-span'] : styles['dot-span'],
      styles['standalone-span'],
      style
    );
    const TextAttrArr = ['color', 'fontSize', 'fontStyle', 'fontWeight', 'lineHeight'];
    const inheritStyle = {};
    TextAttrArr.forEach((item) => {
      if (wrapStyle[item]) {
        inheritStyle[item] = wrapStyle[item];
      }
    });
    const textStyle = Object.assign({}, styles.span, sup || always ? null : styles['dot-span'], inheritStyle);
    if (!type || type !== 'auto') {
      return (
        <View x="badge" style={wrapStyle}>
          {!hidden ? <Text style={textStyle}>{sup}</Text> : null}
        </View>
      );
    }
    const touchStyle = [styles['auto-dot']];
    if (!renderBadge) {
      touchStyle.unshift(wrapStyle);
    }
    return (
      <View style={styles['auto-container']}>
        <View style={styles['auto-chindren']}>{children}</View>
        <Touchable x="badge" style={touchStyle} onPress={this.onPress}>
          {this.renderInnerText(hidden, textStyle, sup)}
        </Touchable>
      </View>
    );
  }
}
Badge.displayName = 'Badge';

Badge.propTypes = {
  max: PropTypes.number,
  count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  type: PropTypes.oneOf(['normal', 'unread']),
  children: PropTypes.any,
  always: PropTypes.bool,
  onPress: PropTypes.func,
  themeStyle: PropTypes.object,
  style: PropTypes.object,
  renderBadge: PropTypes.func,
};

Badge.defaultProps = {
  max: 99,
  count: '',
  type: 'normal',
  children: null,
  always: false,
  onPress: () => {},
  themeStyle: {},
  style: {},
  renderBadge: undefined,
};

Badge.contextTypes = {
  getConfig: PropTypes.func,
};

const StyledBadge = connectStyle(stylesProvider)(Badge);

export default StyledBadge;