context = window
ConfigureTracksStore = @ConfigureTracksStore
ConfigureTracksActions = @ConfigureTracksActions
@ManageVstsDialog = React.createClass({

  mixins: [Reflux.listenTo(@ConfigureTracksStore,"onConfigureTracksChanged"), Reflux.listenTo(@AppStore, "onAppInit")]

  onConfigureTracksChanged:(configureTracks) ->
    @setState({configureTracks: configureTracks})

  onAppInit: (@app) ->

  getInitialState: () ->
    {configureTracks: null}

  render: () ->

    if @state.configureTracks?
      action = 'CLOSE'

      paths = []
      for path in @state.configureTracks.scanPaths.paths
        if path.type == "VST"
          for vstPath in path.paths

            paths.push(`<tr><td className="manage-vst-path"><div>{vstPath}</div></td><td className="manage-vst-action"><div><a onClick={this.deletePath.bind(this, vstPath)}>delete</a></div></td></tr>`)

      contents = `<div>
        <table className="generaltable manage-vst-table">
          <thead>
          <tr>
            <th className="manage-vst-path">PATH</th>
            <th className="manage-vst-action"></th>
          </tr>
          </thead>
          <tbody className="manage-vst-content">
          {paths}
          </tbody>
        </table></div>`

    `<div>
      <div className="content-head">
        <img className="content-icon" src="/assets/content/icon_add.png" height={19} width={19}/>
        <h1>manage plug-in scan folders</h1>
      </div>
      <div className="dialog-inner">
        <h3></h3>
        <p className="instructions">
          If a scan is not finding the VST or AU plugin you want to use, it’s likely that we aren’t scanning the location where the plugin is installed. Click the ADD SCAN FOLDER button below, and navigate to the folder where the plugin is installed to add that location to the scan list.
        </p>

        {contents}

        <div className="actions">
          <a onClick={this.doClose} className="button-orange">CLOSE</a>
          <a onClick={this.selectVSTDirectory} className="button-orange add-scan-folder">ADD SCAN FOLDER</a>
        </div>
      </div>
    </div>`

  inputChanged: (e) ->
    $root = $(@getDOMNode())

  deletePath: (path, e) ->
    e.preventDefault()

    ConfigureTracksActions.removeSearchPath(path)

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

    ConfigureTracksActions.selectVSTDirectory()

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

    @app.layout.closeDialog('manage-vsts-dialog', false)

  componentDidMount: () ->
    $root = $(@getDOMNode())

  componentWillUpdate: () ->
    @ignoreICheck = true
    $root = $(@getDOMNode())

  componentDidUpdate: () ->
    $root = $(@getDOMNode())
})