context = window
MIX_MODES = context.JK.MIX_MODES

SessionsActions = @SessionsActions

@FindSessionScreen = React.createClass({

  mixins: [Reflux.listenTo(@AppStore, "onAppInit"), Reflux.listenTo(@UserStore, "onUserChanged")]

  LIMIT: 20
  instrument_logo_map: context.JK.getInstrumentIconMap24()

  getInitialState: () ->
    {activeTab: '', search: '', type: 'user-input', screenActive: false}


  generateProperties: (tab) ->
    properties = {}
    properties['active'] = @state.activeTab == tab
    properties

  generateTabClasses: (tab) ->
    classes = {}
    classes['find-tab'] = true
    classes[tab] = true

    if @state.activeTab == tab
      classes['active'] = true

    classNames(classes)

  tabActivate: (tab) ->
    @setState({activeTab: tab})

  render: () ->

    myTabClasses = @generateTabClasses('my')
    openTabClasses = @generateTabClasses('open')
    upcomingTabClasses = @generateTabClasses('upcoming')

    myProperties = @generateProperties('my')
    openProperties = @generateProperties('open')
    upcomingProperties = @generateProperties('upcoming')

    search = ''

    `<div className="FindSessionScreen">
            <form id="find-session-form">
                <div className="session-filter">
                    <div style={{minWidth:'770px'}}>
                        <div className="tabs">
                            <a className={myTabClasses} onClick={this.tabActivate.bind(this, 'my')}>
                                For Me
                            </a>

                            <a className={openTabClasses} onClick={this.tabActivate.bind(this, 'open')}>
                                Open Jams
                            </a>

                            <a className={upcomingTabClasses} onClick={this.tabActivate.bind(this, 'upcoming')}>
                                Upcoming
                            </a>
                        </div>
                    </div>
                </div>
            </form>

            <FindSessionOpen mode='my' active={myProperties.active} screenActive={this.state.screenActive}/>
            <FindSessionOpen mode='open' active={openProperties.active} screenActive={this.state.screenActive} />
            <FindSessionOpen mode='upcoming' active={upcomingProperties.active} screenActive={this.state.screenActive} />
        </div>`



  componentDidMount: () ->
    return

  componentDidUpdate: (prevProps, prevState) ->
    return

  beforeShow: () ->
    return

  afterShow: () ->
    SessionsActions.watching.trigger(true)

    if @state.activeTab == ''
      @setState({activeTab: 'my'})

    @setState({screenActive:true})
  beforeHide: () ->
    SessionsActions.watching.trigger(false)
    SessionsActions.resetSessions.trigger()
    @setState({screenActive:false})

  onAppInit: (@app) ->
    @EVENTS = context.JK.EVENTS
    @rest = context.JK.Rest()
    @logger = context.JK.logger

    screenBindings =
      'beforeShow': @beforeShow
      'afterShow': @afterShow
      'beforeHide': @beforeHide

    @app.bindScreen('findSession', screenBindings)

  onUserChanged: (userState) ->
    @user = userState?.user
})