context = window
ConfigStore = context.ConfigStore

ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

@TopMessageHolder = React.createClass(
  {
    displayName: 'Top Message Holder',
    minimum_time_until_sub_prompt: 1000 * 60 * 15 # 30 minutes
    mixins: [Reflux.listenTo(ConfigStore, "onConfig"), Reflux.connect(context.JK.Stores.Broadcast, 'notification')]

    getInitialState: () ->
      {}

    onConfig: (configs) ->
      if configs.top_message
        @setState({top_message: configs.top_message})

    componentDidUpdate:() ->
      $root = $(this.getDOMNode())
      context.JK.popExternalLinks($root)
      return false

    render: () ->
      # only show the subscription concern message if there is a concerpn and due time is less thant 30 minutes away
      if @state.notification && @state.notification.subscriptionConcern? && @state.notification.subscriptionConcern.until.total < @minimum_time_until_sub_prompt
        `<div id="broadcast-notification-holder" className="broadcast-notification-holder" >
            <SubscriptionConcern key="subscriptionconcern" subscription={this.state.notification.subscriptionConcern}  />
        </div>`
      else if @state.top_message
        `<div id="broadcast-notification-holder" className="broadcast-notification-holder" >
            <div className="broadcast-notification config" dangerouslySetInnerHTML={{__html:this.state.top_message}}>

            </div>
        </div>`
      else
        return null
  });