/**
 * Editor for builder
 * @class ApBuilderEditor
 */

'use strict'

import React, {PropTypes as types} from 'react'
import classnames from 'classnames'
import {ApEditor} from 'apeman-react-editor'
import {ApButtonGroup, ApButton, ApIconButton} from 'apeman-react-button'
/** @lends ApBuilderEditor */
const ApBuilderEditor = React.createClass({
  // --------------------
  // Specs
  // --------------------
  propTypes: {
    /** Handle for change */
    onChange: types.func,
    /** Handle for cancel */
    onCancel: types.func,
    /** Handle for submit */
    onSubmit: types.func,
    /** Label texts */
    labels: types.object,
    /** Editting source */
    src: types.string,
    /** Editting type */
    mode: types.string,
    /** Error message */
    error: types.oneOfType([ types.string, types.object ]),
    /** Show spinner */
    spinning: types.bool,

    /** Custom actions */
    actions: types.array

  },

  getDefaultProps () {
    return {
      labels: {
        cancel: 'Cancel',
        submit: 'Submit'
      },
      actions: []
    }
  },

  getInitialState () {
    return {
      actionBarOpen: false
    }
  },

  render () {
    const s = this
    let { state, props } = s
    let { labels, src } = props
    let actions = s.getActions()
    let hasActions = actions && actions.length > 0
    return (
      <div className={ classnames('ap-builder-editor', props.className) }>
        <div className={ classnames('ap-builder-editor-main', {
          'ap-builder-editor-main-with-action': hasActions
        }) }>
          <ApEditor value={ src }
                    spinning={ props.spinning }
                    mode={ props.mode }
                    error={ props.error }
                    onChange={ props.onChange }
                    editorRef={ (editor) => s.editor = editor }
          />
          { hasActions ? s._renderActionBar(actions) : null }
        </div>
        <div className='ap-builder-editor-control'>
          <ApButtonGroup>
            <ApButton onTap={ s.handleCancel }> { labels.cancel }</ApButton>
            <ApButton primary onTap={ s.handleSubmit }> { labels.submit }</ApButton>
          </ApButtonGroup>
        </div>
      </div>
    )
  },
  // --------------------
  // Lifecycle
  // --------------------

  componentDidUpdate (prevProps, prevState) {
    const s = this
    let { editor } = s
    if (editor) {
      s._editorRefreshTimer = setTimeout(() => {
        editor.refresh()
      }, 300)
    }
  },

  componentWillUnmount () {
    const s = this
    clearTimeout(s._editorRefreshTimer)
  },

  // --------------------
  // Handle
  // --------------------

  handleCancel (e) {
    const s = this
    let { props } = s
    let { mode, src } = props
    if (props.onCancel) {
      props.onCancel({ mode, value: src })
    }
  },

  handleSubmit (e) {
    const s = this
    let { props } = s
    let { mode, src } = props
    if (props.onSubmit) {
      props.onSubmit({ mode, value: src })
    }
  },

  toggleActionBar () {
    const s = this
    let { state } = s
    s.setState({ actionBarOpen: !state.actionBarOpen })
  },

  getActions () {
    const s = this
    let { props } = s
    let { actions } = props
    return actions && actions
        .filter((action) => {
          let { hidden } = action
          if (typeof hidden === 'function') {
            hidden = hidden()
          }
          return !hidden
        })
  },

  // --------------------
  // Private
  // --------------------

  _renderActionBar (actions) {
    const s = this
    let { state } = s
    let { actionBarOpen } = state
    return (
      <div className={ classnames('ap-builder-editor-action-bar', {
        'ap-builder-editor-action-bar-open': actionBarOpen
      })}>
        <ApIconButton simple
                      className={ classnames('ap-builder-editor-action-bar-toggle') }
                      icon={ actionBarOpen ? 'fa fa-toggle-down' : 'fa fa-toggle-up' }
                      onTap={ s.toggleActionBar }
        >
        </ApIconButton>
        { actions.map((action, i) => (
            <ApButton className='ap-builder-editor-action-item'
                      simple
                      key={ i }
                      onTap={ action.handle }
            >{ action.text }
            </ApButton>
          ))}
      </div>
    )
  },

  _editorRefreshTimer: null
})

export default ApBuilderEditor