// @flow
import React, { Component, } from 'react';
import { observer } from 'mobx-react';
import { defineMessages, intlShape } from 'react-intl';
import classnames from 'classnames';
import Input from 'react-toolbox/lib/input/Input';
import ReactToolboxMobxForm from '../../../lib/ReactToolboxMobxForm';
import styles from './InlineEditingInput.scss';

const messages = defineMessages({
  change: {
    id: 'inline.editing.input.change.label',
    defaultMessage: '!!!change',
    description: 'Label "change" on inline editing inputs in inactive state.'
  },
  cancel: {
    id: 'inline.editing.input.cancel.label',
    defaultMessage: '!!!cancel',
    description: 'Label "cancel" on inline editing inputs in inactive state.'
  },
  changesSaved: {
    id: 'inline.editing.input.changesSaved',
    defaultMessage: '!!!Your changes have been saved',
    description: 'Message "Your changes have been saved" for inline editing (eg. on Profile Settings page).'
  }
});

@observer
export default class InlineEditingInput extends Component {

  props: {
    isActive: boolean,
    inputFieldLabel: string,
    inputFieldValue: string,
    onStartEditing: Function,
    onStopEditing: Function,
    onCancelEditing: Function,
    onSubmit: Function,
    isValid: Function,
    validationErrorMessage: string,
    successfullyUpdated: boolean,
  };

  static contextTypes = {
    intl: intlShape.isRequired,
  };

  validator = new ReactToolboxMobxForm({
    fields: {
      inputField: {
        value: this.props.inputFieldValue,
        validators: [({ field }) => (
          [
            this.props.isValid(field.value),
            this.props.validationErrorMessage
          ]
        )],
      }
    }
  }, {
    options: {
      validateOnChange: true,
      validationDebounceWait: 250,
    },
  });

  handleInputKeyDown = (event: KeyboardEvent) => {
    if (event.which === 13) { // ENTER key
      this.submit();
    }
    if (event.which === 27) { // ESCAPE key
      this.props.onCancelEditing();
    }
  };

  submit() {
    this.validator.submit({
      onSuccess: (form) => {
        const { inputField } = form.values();
        if (inputField !== this.props.inputFieldValue) {
          this.props.onSubmit(inputField);
          this.props.onStopEditing();
        } else {
          this.props.onCancelEditing();
        }
      }
    });
  }

  componentDidUpdate() {
    if (this.props.isActive) {
      this.inputField.getWrappedInstance().focus();
    }
  }

  inputField: Input;

  render() {
    const { validator } = this;
    const {
      inputFieldLabel,
      isActive,
      onStartEditing,
      onCancelEditing,
      inputFieldValue,
      successfullyUpdated
    } = this.props;
    const { intl } = this.context;
    const inputField = validator.$('inputField');
    const componentStyles = classnames([
      styles.component,
      isActive ? null : styles.inactive,
    ]);
    const inputStyles = classnames([
      successfullyUpdated ? 'input_animateSuccess' : null,
      isActive ? null : 'input_cursorPointer'
    ]);

    return (
      <div
        className={componentStyles}
        onBlur={this.submit.bind(this)}
        onClick={onStartEditing}
        role="presentation"
        aria-hidden
      >

        <Input
          className={inputStyles}
          type="text"
          label={inputFieldLabel}
          value={isActive ? inputField.value : inputFieldValue}
          onChange={inputField.onChange}
          onFocus={inputField.onFocus}
          onBlur={inputField.onBlur}
          onKeyDown={event => this.handleInputKeyDown(event)}
          error={isActive ? inputField.error : null}
          disabled={!isActive}
          ref={(input) => { this.inputField = input; }}
        />

        {isActive && (
          <button
            className={styles.button}
            onClick={onCancelEditing}
          >
            {intl.formatMessage(messages.cancel)}
          </button>
        )}

        {successfullyUpdated && (
          <div className={styles.savingResultLabel}>
            {intl.formatMessage(messages.changesSaved)}
          </div>
        )}

      </div>
    );
  }

}

@@ -1034,16 +1034,54 @@
 nent %7B%0A%0A
+  state = %7B%0A    isActive: false,%0A  %7D%0A%0A
   props:
@@ -1845,229 +1845,22 @@
 %0A%0A  
-handleInputKeyDown = (event: KeyboardEvent) =%3E %7B%0A    if (event.which === 13) %7B // ENTER key%0A      this.submit();%0A    %7D%0A    if (event.which === 27) %7B // ESCAPE key%0A      this.props.onCancelEditing();%0A    %7D%0A  %7D;%0A%0A  submit()
+submit = () =%3E
  %7B%0A 
@@ -2172,23 +2172,652 @@
 %7D%0A      
-%7D%0A    %7D
+  this.setState(%7B isActive: false %7D);%0A      %7D%0A    %7D);%0A  %7D%0A%0A  handleInputKeyDown = (event: KeyboardEvent) =%3E %7B%0A    if (event.which === 13) %7B // ENTER key%0A      this.onBlur();%0A    %7D%0A    if (event.which === 27) %7B // ESCAPE key%0A      this.onCancel();%0A    %7D%0A  %7D;%0A%0A  onFocus = () =%3E %7B%0A    this.setState(%7B isActive: true %7D);%0A    this.props.onStartEditing();%0A  %7D%0A%0A  onBlur = () =%3E %7B%0A    if (this.state.isActive) %7B%0A      this.submit();%0A    %7D%0A  %7D%0A%0A  onCancel = () =%3E %7B%0A    const inputField = this.validator.$('inputField');%0A    inputField.value = this.props.inputFieldValue;%0A    this.setState(%7B isActive: false %7D);%0A    this.props.onCancelEditing(
 );%0A  %7D%0A%0A
@@ -3057,53 +3057,8 @@
 ve,%0A
-      onStartEditing,%0A      onCancelEditing,%0A
     
@@ -3557,25 +3557,14 @@
 his.
-submit.bind(this)
+onBlur
 %7D%0A  
@@ -3578,30 +3578,28 @@
 nClick=%7B
-onStartEditing
+this.onFocus
 %7D%0A      
@@ -4246,23 +4246,32 @@
   on
-Click=%7B
+MouseDown=%7Bthis.
 onCancel
 Edit
@@ -4266,23 +4266,16 @@
 onCancel
-Editing
 %7D%0A      

Improve InlineEditingInput component