'use strict';

/** @jsx createElement */
import { createElement, Component, PropTypes } from 'rax';
import { connectStyle } from 'nuke-theme-provider';
import stylesProvider from './styles';
import MDInput from './view/material';
import NormalInput from './view/normal';

class Input extends Component {
  constructor(props, context) {
    super(props);
    this.focus = this.focus.bind(this);
    this.blur = this.blur.bind(this);
    this.clear = this.clear.bind(this);
    this.getRef = this.getRef.bind(this);
    this.getValue = this.getValue.bind(this);
    this.setNativeFormatRule = this.setNativeFormatRule.bind(this);

    this.materialDesign =
      context.androidConfigs && context.androidConfigs.materialDesign;
    if ('materialDesign' in props) {
      this.materialDesign = props.materialDesign;
    }
  }
  focus() {
    this.refs.baseinput.focus();
  }
  clear() {
    this.refs.baseinput.clear();
  }
  getRef() {
    return this.refs.baseinput.getRef();
  }
  blur() {
    this.refs.baseinput.blur();
  }
  getValue() {
    return this.refs.baseinput.getValue();
  }
  setNativeFormatRule(rules) {
    return this.refs.baseinput.setNativeFormatRule(rules);
  }
  render() {
    return this.materialDesign ? (
      <MDInput ref="baseinput" {...this.props} />
    ) : (
      <NormalInput ref="baseinput" {...this.props} />
    );
  }
}
Input.contextTypes = {
  androidConfigs: PropTypes.any,
  commonConfigs: PropTypes.any,
};
Input.displayName = 'Input';
const StyledInput = connectStyle(stylesProvider, { withRef: true })(Input);

export default StyledInput;