import Ember from 'ember';
import BaseFocusable from './base-focusable';
import ColorMixin from 'ember-paper/mixins/color-mixin';
import FlexMixin from 'ember-paper/mixins/flex-mixin';

export default BaseFocusable.extend(ColorMixin, FlexMixin, {
  tagName: 'md-input-container',
  classNames: ['md-default-theme'],
  classNameBindings: ['hasValue:md-input-has-value', 'focus:md-input-focused', 'isInvalid:md-input-invalid', 'iconFloat:md-icon-float'],
  type: 'text',
  autofocus: false,
  tabindex: -1,
  hideAllMessages: false,
  hasValue: Ember.computed.notEmpty('value'),
  inputElementId: Ember.computed('elementId', function() {
    return 'input-' + this.get('elementId');
  }),
  isInvalid: Ember.computed('isTouched', 'value', function() {
    return this.validate();
  }),
  renderCharCount: Ember.computed('value', function() {
    var currentLength = this.get('value') ? this.get('value').length : 0;
    return currentLength + '/' + this.get('maxlength');
  }),
  iconFloat: Ember.computed.and('icon', 'label'),

  didInsertElement(){
    // Check if input is textarea
    if (this.$().children('textarea').length === 1 ) {
      this.setupTextarea();
    }
  },

  setupTextarea(){
    var textarea = this.$().children('textarea').first(),
    textareaNode = textarea[0],
    container = this.$()[0],
    minRows = NaN,
    lineHeight = null;

    if (textareaNode.hasAttribute('rows')) {
      minRows = parseInt(textareaNode.getAttribute('rows'));
    }

    textarea.on('keydown input', () => {
      this.growTextarea(textarea, textareaNode, container, minRows, lineHeight);
    });

    if (isNaN(minRows)) {
      textarea.attr('rows','1');

      textarea.on('scroll', () => {
        this.onScroll(textareaNode);
      });
    }

    Ember.$(window).on('resize', this.growTextarea(textarea, textareaNode, container, minRows, lineHeight));
  },
  growTextarea(textarea, textareaNode, container, minRows, lineHeight){
    // sets the md-input-container height to avoid jumping around
    container.style.height = container.offsetHeight+'px';

    // temporarily disables element's flex so its height 'runs free'
    textarea.addClass('md-no-flex');

    if(isNaN(minRows)) {
      textareaNode.style.height = "auto";
      textareaNode.scrollTop = 0;
      var height = this.getHeight(textareaNode);
      if (height) {
        textareaNode.style.height = height + 'px';
      }
    } else {
      textareaNode.setAttribute("rows", 1);

      if(!lineHeight) {
        textareaNode.style.minHeight = '0';

        lineHeight = textarea.prop('clientHeight');

        textareaNode.style.minHeight = null;
      }

      var rows = Math.max(minRows, Math.round(textareaNode.scrollHeight / lineHeight));
      textareaNode.setAttribute("rows", rows);
    }

    // reset everything back to normal
    textarea.removeClass('md-no-flex');
    container.style.height = 'auto';

  },
  getHeight(node){
    var line = node.scrollHeight - node.offsetHeight;
    return node.offsetHeight + (line > 0 ? line : 0);
  },
  onScroll(node){
    node.scrollTop = 0;
    // for smooth new line adding
    var line = node.scrollHeight - node.offsetHeight;
    var height = node.offsetHeight + line;
    node.style.height = height + 'px';
  },

  willDestroyElement(){
    Ember.$(window).off('resize', this.growTextarea);
  },

  validate() {

    if (!this.get('isTouched')) {
      return false;
    }

    var returnValue = false;
    var currentValue = this.get('value');
    var constraints = [
      {
        attr: 'required',
        defaultError: 'This is required.',
        isError: () => this.get('required') && !this.get('hasValue')
      },
      {
        attr: 'min',
        defaultError: 'Must be at least ' + this.get('min') + '.',
        isError: () => +currentValue < +this.get('min')
      },
      {
        attr: 'max',
        defaultError: 'Must be less than ' + this.get('max') + '.',
        isError: () => +currentValue > +this.get('max')
      },
      {
        attr: 'maxlength',
        defaultError: 'Must not exceed ' + this.get('maxlength') + ' characters.',
        isError: () => currentValue && currentValue.length > + this.get('maxlength')
      }
    ];

    constraints.some(thisConstraint => {
      if(thisConstraint.isError()) {
        this.setError(thisConstraint);
        returnValue = true;
        return true;
      }
    });

    return returnValue;
  },

  setError(constraint) {
    this.set('ng-message', constraint.attr);
    this.set('errortext', this.get(constraint.attr + '-errortext') || constraint.defaultError);
  },

  actions: {
    focusIn(value) {
      // We resend action so other components can take use of the actions also ( if they want ).
      // Actions must be sent before focusing.
      this.sendAction('focus-in', value);
      this.set('focus',true);
    },
    focusOut(value) {
      this.sendAction('focus-out', value);
      this.set('focus',false);
      this.set('isTouched', true);
    },
    keyDown(value, event) {
      this.sendAction('key-down', value, event);
    }
  }
});

@@ -1044,95 +1044,39 @@
 nt()
-%7B%0A    // Check if input is textarea%0A    if (this.$().children('textarea').length === 1 
+ %7B%0A    if (this.get('textarea')
 ) %7B%0A
@@ -1132,16 +1132,17 @@
 xtarea()
+ 
 %7B%0A    va
@@ -1250,14 +1250,22 @@
 his.
-$()%5B0%5D
+get('element')
 ,%0A  
@@ -1813,16 +1813,17 @@
 );%0A  %7D,%0A
+%0A
   growTe
@@ -1884,16 +1884,17 @@
 eHeight)
+ 
 %7B%0A    //
@@ -2840,22 +2840,22 @@
 'auto';%0A
-%0A
   %7D,%0A
+%0A
   getHei
@@ -2859,24 +2859,25 @@
 Height(node)
+ 
 %7B%0A    var li
@@ -2979,16 +2979,17 @@
 );%0A  %7D,%0A
+%0A
   onScro
@@ -2996,16 +2996,17 @@
 ll(node)
+ 
 %7B%0A    no
@@ -3221,16 +3221,17 @@
 lement()
+ 
 %7B%0A    Em

Fix code syntax before commit