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
    }

  componentWillMount: ->
    @ref = @props.childProps?.ref or 'input'
  
  render: -> 
    
    {factory, childProps, children} = @props
    props = _.assign {}, childProps, {ref: @ref}

    div {
      key: 'wrapper'
    }, children or factory(props)

  getInput: -> 
    @refs[@ref]

  getInputEl: -> 
    ReactDOM.findDOMNode(@refs[@ref])

  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)