React = require 'react'
TransitionGroup = React.createFactory require('react-addons-transition-group')
DialogueBox = React.createFactory(require './dialogue_box')
_ = require 'lodash'

{div} = React.DOM

###
Dialogue Box Props

@props.message - String
  message to display

@props.confirmText - String - default: 'OK'
  text to display in okay/confirm button

@props.cancelText - String - default: 'Cancel'
  text gto display in the cancel button

@props.width - Number - default: 400
  width in pixels of the dialogue

@props.confirmCallback - method
  method to call when the 'ok' button is clicked or enter is pressed

@props.cancelCallBack - method
  method to call when the cancel button is clicked

@props.lightBackdrop - boolean
  show a lighter backdrop. e.g. when displayed over a modal
###

Dialogue = React.createClass
  
  displayName: 'Dialogue'

  getDefaultProps: ->
    {
      message: ''
      confirmText: 'OK'
      cancelText: 'Cancel'
      confirmCallback: ->
      cancelCallback: ->
      width: 400
      lightBackdrop: no
    }
  
  render: ->
    {showDialogue} = @state
    {lightBackdrop} = @props
    props = _.clone(@props)
    dialogue = DialogueBox _.assign props, {
      transitionOut: @transitionOut
    } if showDialogue

    if lightBackdrop
      className = 'dialogue-container light-backdrop'
    else
      className = 'dialogue-container'

    TransitionGroup {
      transitionName: 'dialogue'
      component: 'div'
      className: className
    }, dialogue

  getInitialState: ->
    {
      showDialogue: no
    }

  componentDidMount: ->
    @setState 
      showDialogue: yes

  transitionOut: ->
    @setState 
      showDialogue: no


module.exports = Dialogue