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')

  updatePort: `async function(e) {
      e.preventDefault();

      // validate

      const name = this.root.find('.name').val();

      const characterMatch = /^[^a-z0-9,' -]+$/i;

      if ((name.length === 0) || (name === '')) {
        context.JK.Banner.showAlert('invalid name', 'Please specify a name.');
        return;
      } else if (name.length < 2) {
        context.JK.Banner.showAlert('invalid name', 'Please specify a name at least 3 characters long.');
        return;
      } else if (name.length > 63) {
        context.JK.Banner.showAlert('invalid name', 'The name must be less than 64 characters long.');
        return;
      } else if (characterMatch.test(name)) {
        context.JK.Banner.showAlert('invalid name',
          'The can only contain A-Z, 0-9, commas, apostrophes, spaces, or hyphens.');
        return;
      }

      const result = await context.jamClient.setJBName(name.trim());

      if (!result) {
        return context.JK.Banner.showAlert('unable to set the name',
          'Please email support@jamkazam.com and let us know the name you are specifying unsuccessfully, or refresh the page and try again.');
      } else {
        return this.app.layout.closeDialog('jamblaster-name-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>`

})