content: import React from 'react';
  import {BaseMixin, ElementaryMixin} from './../common/common.js';
  
  import TextInput from './internal/text-input.js';
  
  import TextInputMixin from './mixins/text-input-mixin.js'
  
  import ItemList from './internal/item-list.js';
  import Backdrop from './../bricks/backdrop.js';
  
  
  import './text.less';
  
  export const Text = React.createClass({
  
    //@@viewOn:mixins
    mixins: [
      BaseMixin,
      ElementaryMixin,
      TextInputMixin
    ],
    //@@viewOff:mixins
  
    //@@viewOn:statics
    statics: {
      tagName: 'UU5.Forms.Text',
      classNames: {
        main: 'uu5-forms-text',
      },
      errors: {
        validateError: 'Validated result is not object.'
      }
    },
    //@@viewOff:statics
  
    //@@viewOn:propTypes
    propTypes: {
      value: React.PropTypes.string,
      password: React.PropTypes.bool
    },
    //@@viewOff:propTypes
  
    //@@viewOn:getDefaultProps
    getDefaultProps: function () {
      return {
        value: '',
        password: false
      };
    },
    //@@viewOff:getDefaultProps
  
    //@@viewOn:standardComponentLifeCycle
    componentWillMount(){
      if (this.props.onValidate && typeof this.props.onValidate === 'function') {
        this._validateOnChange({value: this.state.value, event: null, component: this})
      }
      return this;
    },
    //@@viewOff:standardComponentLifeCycle
  
    //@@viewOn:interface
    //@@viewOff:interface
  
    //@@viewOn:overridingMethods
    // TODO: tohle je ještě otázka - je potřeba nastavit hodnotu z jiné komponenty (musí být validace) a z onChange (neměla by být validace)
    setValue_(value, setStateCallback){
      if (this._checkRequired({value: value})) {
        if (typeof this.props.onValidate === 'function') {
          this._validateOnChange({value: value, event: null, component: this})
        } else {
          this.props.required ? this.setSuccess(null, value, setStateCallback) : this.setInitial(null, value, setStateCallback);
        }
      }
  
      return this;
    },
    //@@viewOff:overridingMethods
  
    //@@viewOn:componentSpecificHelpers
    _validateOnChange(opt){
      let result = typeof this.props.onValidate === 'function' ? this.props.onValidate(opt) : null;
      if (result) {
        if (typeof result === 'object') {
          if (result.feedback) {
            this.setFeedback(result.feedback, result.message, result.value);
          } else {
            this.setState({value: opt.value});
          }
        } else {
          this.showError('validateError', null, {context: {event: e, func: this.props.onValidate, result: result}});
        }
      }
      return this;
    },
  
    _getFeedbackIcon(){
      let icon = this.props.required ? this.props.successGlyphicon : null;
      switch (this.getFeedback()) {
        case 'success':
          icon = this.props.successGlyphicon;
          break;
        case 'warning':
          icon = this.props.warningGlyphicon;
          break;
        case 'error':
          icon = this.props.errorGlyphicon;
          break;
      }
      return icon;
    },
    //@@viewOff:componentSpecificHelpers
  
    //@@viewOn:render
    render: function () {
      let inputId = this.getId() + '-input';
  
      return (
        <div {...this._getInputAttrs()}>
          {this.getLabel(inputId)}
          {this.getInputWrapper([
            <TextInput
              id={inputId}
              name={this.props.name || inputId}
              value={this.state.value}
              placeholder={this.props.placeholder}
              type={this.props.password ? 'password' : this.props.type || 'text'}
              onChange={this.onChange}
              onBlur={this.onBlur}
              onFocus={this.onFocus}
              mainAttrs={this.props.inputAttrs}
              disabled={this.isDisabled() || this.isLoading()}
              readonly={this.isReadOnly()}
              glyphicon={this._getFeedbackIcon()}
              loading={this.isLoading()}
            />,
  
            this.state.autocompleteItems && <ItemList {...this._getItemListProps()}>
              {this._getChildren()}
            </ItemList>,
            this.state.autocompleteItems && <Backdrop {...this._getBackdropProps()} />])}
  
        </div>
      );
    }
    //@@viewOn:render
  });
  
  export default Text;
  