/** @jsx createElement */
import { createElement, PureComponent, PropTypes } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';

class Count extends PureComponent {
  constructor(props, context) {
    super(props);
    this.fixedFont = context.commonConfigs && context.commonConfigs.fixedFont;
    if ('fixedFont' in props) {
      this.fixedFont = props.fixedFont;
    }
  }

  render() {
    const {
      maxLength,
      multiple,
      renderCount,
      themeStyle: styles,
      count,
    } = this.props;
    if (!maxLength || !renderCount) return null;

    // const { count } = this.state;
    return (
      <View
        style={
          styles[
            `${multiple ? 'md-multiple-count-wrap' : 'md-single-count-wrap'}`
          ]
        }
      >
        <Text
          fixedFont={this.fixedFont}
          style={[
            styles[`${multiple ? 'multiple-count-text' : 'single-count-text'}`],
            count > maxLength ? styles['count-error'] : {},
          ]}
        >
          {count} / {maxLength}
        </Text>
      </View>
    );
  }
}

Count.contextTypes = {
  // androidConfigs: PropTypes.any,
};

export default Count;