ldx-widgets/src/mixins/input_mixin.coffee

widgets

ReactDOM = require 'react-dom'
_ = require 'lodash'
{makeGuid} = require '../utils'
{ENTER} = require '../constants/keyboard'

module.exports =

  getInitialState: ->
    valueHasChanged: no
  
  componentWillMount: -> 
    {isInPopover} = @props

    # create a unique id for this input
    # used by the validation framework to group validation errors
    @inputId = makeGuid()

    # Configure the validation framework to be above or below the popover layer
    if isInPopover then @trigger 'raiseValidation'
    else @trigger 'lowerValidation'

  componentDidMount: ->
    {value, validation, focusOnMount} = @props
    
    @validate validation, value
    
    # Focus
    if focusOnMount then @focus()
    

  componentWillReceiveProps: (nextProps) ->
    {value, validation} = nextProps
    
    validationChanged = (
      if typeof validation is 'function' then no
      else not _.isEqual(validation?.messages, @props.validation?.messages)
    )

    # Run validaiton if the validation changes
    if validationChanged then @validate(validation, value) 

  
  componentWillUnmount: -> @trigger 'clearValidationError', @inputId

  handleChange: (e) ->
    {value} = e.target
    {onChange, validation} = @props
    
    {valueHasChanged} = @state
    @setState {valueHasChanged: yes} if not valueHasChanged

    @validate(validation, value) 
    onChange?(value)
    @fireDelayedAction()

  fireDelayedAction: ->
    {delayedActionOnChange, value} = @props

    if delayedActionOnChange?
      {action, interval} = delayedActionOnChange

      clearInterval(@delayedActionTimer)

      @delayedActionTimer = setTimeout =>
        action(value)
      , interval
  
  validate: (validation, value) ->
    return if validation is off 

    # Run validation and show any auto show messages
    if typeof validation is 'function' then validationError = validation(value)
    # validation can also be passed as a static array
    else validationError = validation

    if validationError?
      @trigger 'addValidationError',
        anchor: @refs.errorAnchor
        error: validationError
        groupId: @inputId
    else 
      @trigger 'clearValidationError', @inputId
      

  handleKeyUp: (e) ->
    {onEnterKey, onKeyUp} = @props

    # If there's an enter key handler, fire it
    if e.keyCode is ENTER then onEnterKey?(e)

    # Fire for all other keyup events
    onKeyUp?(e)

  getValue: -> 
    value = do =>
      if @refs.input.getValue? then @refs.input.getValue()
      else @refs.input.value

    # Run the input through any text transforms before returning
    if @props.textTransform? and value
      value = @props.textTransform(value)

    return value

  clear: -> @props.onChange('')

  focus: -> ReactDOM.findDOMNode(@refs.input).focus()

  blur: -> ReactDOM.findDOMNode(@refs.input).blur()

  handleErrorMouseOver: ->
    {validation, value} = @props 

    @trigger 'toggleError',
      groupId: @inputId
      status: yes
      isMouseOver: yes

  handleErrorMouseOut: ->
    @trigger 'toggleError',
      groupId: @inputId
      status: no
      isMouseOver: yes