var _ = require('underscore');
var React = require('react/addons');
var remote = require('remote');
var exec = require('exec');
var dialog = remote.require('dialog');
var metrics = require('./Metrics');
var ContainerStore = require('./ContainerStore');

var ContainerSettingsVolumes = React.createClass({
  handleChooseVolumeClick: function (dockerVol) {
    var self = this;
    dialog.showOpenDialog({properties: ['openDirectory', 'createDirectory']}, function (filenames) {
      if (!filenames) {
        return;
      }
      var directory = filenames[0];
      if (directory) {
        metrics.track('Chose Directory for Volume');
        var volumes = _.clone(self.props.container.Volumes);
        volumes[dockerVol] = directory;
        var binds = _.pairs(volumes).map(function (pair) {
          return pair[1] + ':' + pair[0];
        });
        ContainerStore.updateContainer(self.props.container.Name, {
          Binds: binds
        }, function (err) {
          if (err) { console.log(err); }
        });
      }
    });
  },
  handleRemoveVolumeClick: function (dockerVol) {
    metrics.track('Removed Volume Directory', {
      from: 'settings'
    });
    var volumes = _.clone(this.props.container.Volumes);
    delete volumes[dockerVol];
    var binds = _.pairs(volumes).map(function (pair) {
      return pair[1] + ':' + pair[0];
    });
    ContainerStore.updateContainer(this.props.container.Name, {
      Binds: binds
    }, function (err) {
      if (err) { console.log(err); }
    });
  },
  handleOpenVolumeClick: function (path) {
    metrics.track('Opened Volume Directory', {
      from: 'settings'
    });
    exec(['open', path], function (err) {
      if (err) { throw err; }
    });
  },
  render: function () {
    if (!this.props.container) {
      return (<div></div>);
    }
    var self = this;
    var volumes = _.map(self.props.container.Volumes, function (val, key) {
      if (!val || val.indexOf(process.env.HOME) === -1) {
        val = (
          <span>
            <a className="value-right">No Folder</a>
            <a className="btn btn-action small" onClick={self.handleChooseVolumeClick.bind(self, key)}>Change</a>
            <a className="btn btn-action small" onClick={self.handleRemoveVolumeClick.bind(self, key)}>Remove</a>
          </span>
        );
      } else {
        val = (
          <span>
            <a className="value-right" onClick={self.handleOpenVolumeClick.bind(self, val)}>{val.replace(process.env.HOME, '~')}</a>
            <a className="btn btn-action small" onClick={self.handleChooseVolumeClick.bind(self, key)}>Change</a>
            <a className="btn btn-action small" onClick={self.handleRemoveVolumeClick.bind(self, key)}>Remove</a>
          </span>
        );
      }
      return (
        <div key={key} className="table-values">
          <span className="value-left">{key}</span><span className="icon icon-arrow-right"></span>
          {val}
        </div>
      );
    });
    return (
      <div className="settings-panel">
        <div className="settings-section">
          <h3>Configure Volumes</h3>
          <div className="table volumes">
            <div className="table-labels">
              <div className="label-left">DOCKER FOLDER</div>
              <div className="label-right">MAC FOLDER</div>
            </div>
            {volumes}
          </div>
        </div>
      </div>
    );
  }
});

module.exports = ContainerSettingsVolumes;