context = window
rest = context.JK.Rest()
logger = context.JK.logger

UserStore = context.UserStore

@JamClassStudentScreen = React.createClass({

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

  onAppInit: (@app) ->
    @app.bindScreen('jamclass',
      {beforeShow: @beforeShow, afterShow: @afterShow, beforeHide: @beforeHide})

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

  componentDidMount: () ->

  componentDidUpdate: () ->

  getInitialState: () ->
    {
    user: null,
    }

  beforeHide: (e) ->


  beforeShow: (e) ->

  afterShow: (e) ->
    @setState({updating: true})
    rest.getLessonSessions().done((response) => @jamClassLoaded(response)).fail((jqXHR) => @failedJamClassLoad(jqXHR))

  resetState: () ->
    @setState({updating: false, lesson: null})

  jamClassLoaded: (response) ->
    @setState({updating: false})
    @setState({summary: response})

  failedJamClassLoad: (jqXHR) ->
    @setState({updating: false})
    @setState({summary: response})
    if jqXHR.status == 404
      @app.layout.notify({title: "Unable to load JamClass info", text: "Try refreshing the web page"})

  render: () ->
    disabled = @state.updating

    classes = []
    if @state.updating
      classes = [`<tr><td colspan="5">Loading...</td></tr>`]
    else

    `<div className="content-body-scroller">
      <div className="column column-left">
        <div className="my-lessons jamclass-section">
          <h2>my lessons</h2>
          <table className="jamtable">
            <thead>
            <tr>
              <th>TEACHER</th>
              <th>DATE/TIME</th>
              <th>STATUS</th>
              <th></th>
              <th>ACTIONS</th>
            </tr>
            </thead>
            <tbody>
            {classes}
            </tbody>
          </table>

          <div className="calender-integration-notice">
            Don't miss a lesson! <a>Integrate your lessons into your calendar.</a>
          </div>
        </div>
        <div className="search-teachers">
          <h2>search teachers</h2>

          <p>JamClass instructors are each individually screened to ensure that they are highly qualified music
            teachers,
            equipped to teach effectively online, and background checked.
          </p>

          <div className="actions">
            <a href="/client#/teachers/search" className="button-orange">SEARCH TEACHERS</a>
          </div>
        </div>
      </div>
      <div className="column column-right">
        <div className="jamclass-section">
          <h2>learn about jamclass</h2>

          <p>
            JamClass is the best way to make music lessons, offering significant advantadges over both traditional
            face-to-face lessons
            and online skype lessons.
          </p>

          <div className="actions">
            <a href="/landing/jamclass/students" className="button-orange" target="_blank">LEARN MORE</a>
          </div>
        </div>
        <div className="jamclass-section">
          <h2>sign up for testdrive</h2>

          <p>
            There are two awesome, painless ways to get started with JamClass.
          </p>

          <p>
            Sign up for TestDrive and take 4 full 30-minute lessons - one each from 4 different instructors - for just
            $49.99.
            You wouldn't marry the first person you date, right? Find the best teacher for you. It's the most important
            factor in the success for your lessons!
          </p>

          <p>
            Or take one JamClass lesson free. It's on us! We're confident you'll take more.
          </p>

          <p>
            Sign up for TestDrive using the button below, or to take one free lesson, search our teachers, and click the
            Book Free Lesson on your favorite.
          </p>

          <div className="actions">
            <a href="/landing/jamclass/students" className="button-orange">SIGN UP FOR TESTDRIVE</a>
            or
            <a href="/client#/teachers/search" className="button-orange">SEARCH TEACHERS</a>
          </div>
        </div>
        <div className="jamclass-section">
          <h2>get ready for your first lesson</h2>

          <p>Be sure to set up and test the JamKazam app in an online music session a few days before
            your first lesson! We're happy to help, and we'll even get in a session with you to make sure everything
            is working properly. Ping us at <a href="mailto:support@jamkazam.com">support@jamkazam.com anytime</a>, and
            read our
            <a onClick={alert.bind('not yet')}>JamClass user guide</a> to learn how to use all the lesson features.
          </p>
        </div>
      </div>
      <br className="clearall"/>
    </div>`

})