React = require 'React'
ReactDOM = require 'react-dom'
{div} = React.DOM
{Flux} = require 'delorean'
_ = require 'lodash'

AddValidationContext = React.createClass

  mixins: [Flux.mixins.storeListener]

  watchStores: ['validation']
  
  childContextTypes: 
    clearValidationError: React.PropTypes.func
    addValidationError: React.PropTypes.func
    getValidationStatus: React.PropTypes.func
    toggleValidationError: React.PropTypes.func
  
  getChildContext: -> 
    {
      @clearValidationError
      @addValidationError
      @getValidationStatus
      @toggleValidationError
    }
  
  render: -> 
    {factory, childProps} = @props

    props = _.assign {}, childProps, {ref: 'input'}
    
    div({}, factory(props))


  getInput: -> @refs.input
  getInputEl: -> ReactDOM.findDOMNode(@refs.input)

  clearValidationError: (inputId) -> @trigger 'clearValidationError', inputId

  addValidationError: (anchor, error, groupId) -> @trigger 'addValidationError', {anchor, error, groupId}

  getValidationStatus: (inputId) -> 
    {errors, forceShowAllErrors} = @getStore 'validation'
    {error: errors[inputId], forceShowAllErrors}

  toggleValidationError: (inputId, status) ->
    @trigger 'toggleError',
      groupId: @inputId
      status: status
      isMouseOver: yes

module.exports = React.createFactory(AddValidationContext)