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

class PlaceHolder extends PureComponent {
  constructor(props, context) {
    super(props);
    this.fixedFont = context.commonConfigs && context.commonConfigs.fixedFont;
    if ('fixedFont' in props) {
      this.fixedFont = props.fixedFont;
    }
  }
  // shouldComponentUpdate(nextProps) {
  //   return (
  //     nextProps.status !== this.props.status ||
  //     nextProps.focus !== this.props.focus ||
  //     nextProps.disabled !== this.props.disabled ||
  //     nextProps.inputValue !== this.props.inputValue ||
  //     nextProps.maxLengthError !== this.props.maxLengthError ||
  //     nextProps.placeholder !== this.props.placeholder
  //     // nextState.error !== this.state.error
  //   );
  // }
  render() {
    // const { focus, inputValue, maxLengthError } = this.state;
    const {
      placeholder,
      placeholderColor,
      themeStyle,
      status,
      disabled,
      errorMessage,
      floatPlaceholder,
      hideErrorWhenFocus,
      focus,
      inputValue,
      maxLengthError,
      validInput,
    } = this.props;
    const hasError = status === 'error' && errorMessage;
    if (!placeholder) return null;
    if ((focus || inputValue) && !floatPlaceholder) return null;
    const phStyle = Object.assign(
      {},
      themeStyle.placeholder,
      themeStyle['md-placeholder-small'],
      !focus && !inputValue && validInput ? themeStyle['md-placeholder'] : {},
      floatPlaceholder ? {} : themeStyle['md-placeholder-static']
    );
    let phTextStyle = Object.assign(
      {},
      themeStyle['placeholder-text'],
      themeStyle['md-placeholder-small-text'],
      placeholderColor ? { color: placeholderColor } : {},

      !focus && !inputValue ? themeStyle['md-placeholder-text'] : {},
      hasError ? themeStyle['md-placeholder-small-text-has-error'] : {},
      !inputValue ? themeStyle['md-empty-placeholder-text'] : {},

      focus ? themeStyle['md-focus-placeholder-text'] : {},

      disabled ? themeStyle['md-disabled-placeholder-text'] : {}
    );
    if (status === 'error' && (maxLengthError || !hideErrorWhenFocus)) {
      phTextStyle = Object.assign(phTextStyle, themeStyle['md-placeholder-small-text-has-error']);
      if (disabled) {
        phTextStyle = Object.assign(phTextStyle, themeStyle['md-disabled-placeholder-text']);
      }
    }
    return (
      <View style={phStyle}>
        <Text fixedFont={this.fixedFont} style={phTextStyle}>
          {placeholder}
        </Text>
      </View>
    );
  }
}

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

export default PlaceHolder;