context = window
MIX_MODES = context.JK.MIX_MODES


@FindSessionScreen = React.createClass({

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

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

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


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

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

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

    classNames(classes)

  render: () ->

    friendTabClasses = @generateTabClasses('friends')
    publicTabClasses = @generateTabClasses('public')
    scheduledTabClasses = @generateTabClasses('scheduled')

    friendProperties = @generateProperties('friends')
    publicProperties = @generateProperties('public')
    scheduledProperties = @generateProperties('scheduled')

    search = ''

    `<div className="">
        <div className="">
            <form id="find-session-form">
                <div className="session-filter">
                    <div style={{minWidth:'770px'}}>
                        <div className="tabs">
                            <a className={friendTabClasses}>
                                Friends
                            </a>

                            <a className={publicTabClasses}>
                                Public
                            </a>

                            <a className={scheduledTabClasses}>
                                Scheduled
                            </a>


                            <div className="search-box">
                                <input className="session-keyword-srch" type="text" name="search"
                                       placeholder="Search by Keyword"/>
                            </div>

                            <div className="right mr10">
                                <a  href="/client#/findSession" style={{textDecoration:'none'}}
                                    className="button-grey btn-refresh">REFRESH<span class="extra"></span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <FindSessionFriends active={friendProperties.active} />
        </div>
    </div>`



  componentDidMount: () ->
    return

  componentDidUpdate: () ->
    return

  beforeShow: () ->
    return

  afterShow: () ->
    return

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

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

    @app.bindScreen('findSession', screenBindings)

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