context = window
@JamBlasterPortDialog = React.createClass({

  mixins: [Reflux.listenTo(@AppStore, "onAppInit")]
  teacher: null

  beforeShow: (args) ->
    logger.debug("JamBlasterPortDialog.beforeShow")


  afterHide: () ->

  onAppInit: (@app) ->
    dialogBindings = {
      'beforeShow': @beforeShow,
      'afterHide': @afterHide
    };

    @app.bindDialog('jamblaster-port-dialog', dialogBindings);

  getInitialState: () ->
    {
      name: ''
    }


  componentDidMount: () ->
    @root = $(@getDOMNode())
    @dialog = @root.closest('.dialog')

  doCancel: (e) ->
    e.preventDefault()
    @app.layout.closeDialog('jamblaster-port-dialog', true);

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

    # validate

    staticPort = @root.find('.port').val()

    staticPort = new Number(staticPort);

    console.log("staticPort", staticPort)
    if context._.isNaN(staticPort)
      @app.layout.notify({title: 'No Settings Have Been Saved!', text: 'Please enter a number from 1026-49150.'})
      return

    if  staticPort < 1026 || staticPort >= 65525
      @app.layout.notify({title: 'No Settings Have Been Saved!', text: 'Please pick a port from 1026 to 65524.'})
      return

    result = context.jamClient.setJbPortBindState({use_static_port: true, static_port: staticPort})

    if !result
      context.JK.Banner.showAlert('unable to set a static port',
        'Please email support@jamkazam.com and let us know the port number you are specifying unsuccessfully, or refresh the page and try again.')
    else
      @app.layout.closeDialog('jamblaster-port-dialog')
  render: () ->
    `<div>
      <div className="content-head">
        <img className="content-icon" src="/assets/content/icon_add.png" height={19} width={19}/>

        <h1>set static port for JamBlaster</h1>
      </div>
      <div className="dialog-inner">

        <p className="help-text">You can specify any port you like, but we recommend an even number in the range including 1026-49150 to avoid conflicts with other programs.  When configuring Port Forwarding in your router, be sure to open this port <b>along with the next 10</b>.  For example, if this field is 12000, then in your router, forward ports 12000-12010 to your computer's IP address.</p>

        <div className="field">
        <label>Port:</label>
        <input className="port" type="text"></input>
        </div>

        <div className="actions">
          <a onClick={this.doCancel} className="button-grey">CANCEL</a>
          <a onClick={this.updatePort} className="button-orange name">SAVE</a>
        </div>
      </div>
    </div>`

})