import Ember from 'ember'
const {$, RSVP} = Ember
import {validate} from 'bunsen-core/actions'

import {PropTypes} from 'ember-prop-types'
import DetailComponent from './detail'
import layout from 'ember-frost-bunsen/templates/components/frost-bunsen-form'

export default DetailComponent.extend({
  // == Component Properties ===================================================

  layout,

  // == State Properties =======================================================

  propTypes: {
    autofocus: PropTypes.bool,
    bunsenModel: PropTypes.oneOfType([
      PropTypes.EmberObject,
      PropTypes.object
    ]).isRequired,
    bunsenView: PropTypes.oneOfType([
      PropTypes.EmberObject,
      PropTypes.object
    ]),
    disabled: PropTypes.bool,
    hook: PropTypes.string,
    onChange: PropTypes.func,
    onError: PropTypes.func,
    onValidation: PropTypes.func,
    registeredComponents: PropTypes.array,
    renderers: PropTypes.oneOfType([
      PropTypes.EmberObject,
      PropTypes.object
    ]),
    showAllErrors: PropTypes.bool,
    validators: PropTypes.array,
    value: PropTypes.oneOfType([
      PropTypes.EmberObject,
      PropTypes.null,
      PropTypes.object
    ])
  },

  getDefaultProps () {
    return {
      autofocus: true,
      classNames: ['frost-bunsen-form'],
      disabled: false,
      hook: 'bunsenForm',
      renderers: {},
      registeredComponents: [],
      showAllErrors: false,
      validators: [],
      value: null
    }
  },

  // == Functions ==============================================================

  /**
   * After render select first input unless something else already has focus on page
   */
  didRender () {
    if (!this.get('autofocus')) {
      return
    }

    // If there is already an element in focus do nothing
    if ($(':focus').length !== 0) {
      return
    }

    // Focus on first input in busen form
    this.$(':input:enabled:visible:first').focus()
  },

  // == Actions ================================================================

  actions: {
    /**
     * Handle when user updates form value
     * @param {String} bunsenId - ID of input that changed
     * @param {Object} inputValue - new value for input that changed
     */
    handleChange (bunsenId, inputValue) {
      const reduxStore = this.get('reduxStore')

      reduxStore.dispatch(
        validate(bunsenId, inputValue, this.get('renderModel'), this.get('validators'), RSVP.all)
      )
    }
  }
})

@@ -1563,16 +1563,683 @@
 ======%0A%0A
+  _onVisiblityChange (e) %7B%0A    // Nothing to do when page/tab loses visiblity%0A    if (e.target.hidden) %7B%0A      return%0A    %7D%0A%0A    const model = this.get('renderModel')%0A    const reduxStore = this.get('reduxStore')%0A    const validators = this.get('validators')%0A    const value = this.get('renderValue')%0A%0A    reduxStore.dispatch(%0A      validate(null, value, model, validators, RSVP.all)%0A    )%0A  %7D,%0A%0A  // == Events =================================================================%0A%0A  didInsertElement () %7B%0A    this._visibilityChangeHandler = this._onVisiblityChange.bind(this)%0A    document.addEventListener('visibilitychange', this._visibilityChangeHandler, false)%0A  %7D,%0A%0A
   /**%0A  
@@ -2603,32 +2603,148 @@
 ).focus()%0A  %7D,%0A%0A
+  willDestroyElement () %7B%0A    document.removeEventListener('visibilitychange', this._visibilityChangeHandler)%0A  %7D,%0A%0A
   // == Actions 

Add visibility API to re-trigger validation