React = require 'react'
createClass = require 'create-react-class'
TransitionGroup = React.createFactory require('react-transition-group/TransitionGroup')
DialogueBox = React.createFactory(require './dialogue_box')
assign = require 'lodash/assign'
clone = require 'lodash/clone'

{div} = require 'react-dom-factories'

###
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 = 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