context = window
ReactCSSTransitionGroup = React.addons.CSSTransitionGroup
NotificationActions = @NotificationActions

@SessionNotifications = React.createClass({

  mixins: [Reflux.listenTo(@SessionNotificationStore,"onNotificationsChanged"), Reflux.listenTo(@AppStore,"onAppInit")]

  onNotificationsChanged: (notifications) ->
    @setState({notifications: notifications})

  getInitialState: () ->
    {notifications: []}

  clearNotifications: (e) ->
    e.preventDefault()

    NotificationActions.clear()

  render: () ->

    notifications = []
    for notification in @state.notifications
      notifications.push(`<SessionNotification  key={notification.id} {...notification} />`)

    `<div className="session-notifications">
      <h2>notifications</h2>
      <a className="session-clear-notifications" onClick={this.clearNotifications}>
        <img src="/assets/content/icon_close.png" width="18" height="20" />
        Clear Notifications
      </a>
      <div className="session-tracks-scroller">
        <ReactCSSTransitionGroup transitionName="session-track-list" transitionAppear={true}>
          {notifications}
        </ReactCSSTransitionGroup>
      </div>
    </div>`

  onAppInit: (app) ->
    @app = app
})