context = window
RecordingStore = @RecordingStore
@SessionRecordingStatus = React.createClass({
  mixins: [Reflux.listenTo(@RecordingStore, "onRecordingChanged")]

  onRecordingChanged: (details) ->
    @setState(details)

  getInitialState: () ->
    {
      isRecording: false,
      cause: "",
      events:[]
    }

  render: () ->

    classes = classNames({
      'session-recording-status' : true
      'has-details' : @state.detail?
    })

    modelState = RecordingStore.recordingModel?.getState()
    #if @state.isRecording == false
    #  return null
    if this.state.isRecording
      recording = `<span className="recording-on">Recording</span>`
    else
      recording = `<span className="recording-off">Not Recording</span>`

    cause = `<span className="cause">cause={this.state.cause}</span>`

    waitingOnClientStop = null
    waitingOnServerStop = null
    if modelState?
      if modelState.waitingOnClientStop
        waitingOnClientStop = `<span className="cause">clientStopping</span>`
      if modelState.waitingOnServerStop
        waitingOnServerStop = `<span className="cause">serverStopping</span>`

    events = []
    for event in @state.events
      events.push(`<li key={event[0]}>{event[0]} brid={event[1]}</li>`)

    initiator = ""
    if this.state.thisClientStartedRecording
      initiator = "Initatior"
    body = `<div className="msg">{recording} {initiator} {cause} {waitingOnClientStop} {waitingOnServerStop}</div>`

    `<div className={classes}>
        {body}
        <ul className="recording-events">
            {events}
        </ul>
    </div>`

  componentDidMount: () ->

})