import PropTypes from "prop-types";
import React from "react";
import Shapes from "../../../shapes";
import Modal from "../Modal";

class NewExperimentModalComponent extends React.Component {
  static propTypes = {
    show: PropTypes.bool.isRequired,
    paths: PropTypes.arrayOf(Shapes.Path),
    schedulers: PropTypes.arrayOf(Shapes.Scheduler),
    traces: PropTypes.arrayOf(Shapes.Trace),
    callback: PropTypes.func.isRequired
  };

  reset() {
    this.textInput.value = "";
    this.pathSelect.selectedIndex = 0;
    this.traceSelect.selectedIndex = 0;
    this.schedulerSelect.selectedIndex = 0;
  }

  onSubmit() {
    this.props.callback(
      this.textInput.value,
      parseInt(this.pathSelect.value, 10),
      parseInt(this.traceSelect.value, 10),
      this.schedulerSelect.value
    );
    this.reset();
  }

  onCancel() {
    this.props.callback(undefined);
    this.reset();
  }

  render() {
    return (
      <Modal
        title="New Experiment"
        show={this.props.show}
        onSubmit={this.onSubmit.bind(this)}
        onCancel={this.onCancel.bind(this)}
      >
        <form
          onSubmit={e => {
            e.preventDefault();
            this.onSubmit();
          }}
        >
          <div className="form-group">
            <label className="form-control-label">Name</label>
            <input
              type="text"
              className="form-control"
              ref={textInput => (this.textInput = textInput)}
            />
          </div>
          <div className="form-group">
            <label className="form-control-label">Path</label>
            <select
              className="form-control"
              ref={pathSelect => (this.pathSelect = pathSelect)}
            >
              {this.props.paths.map(path => (
                <option value={path.id} key={path.id}>
                  {path.name ? path.name : "Path " + path.id}
                </option>
              ))}
            </select>
          </div>
          <div className="form-group">
            <label className="form-control-label">Trace</label>
            <select
              className="form-control"
              ref={traceSelect => (this.traceSelect = traceSelect)}
            >
              {this.props.traces.map(trace => (
                <option value={trace.id} key={trace.id}>
                  {trace.name}
                </option>
              ))}
            </select>
          </div>
          <div className="form-group">
            <label className="form-control-label">Scheduler</label>
            <select
              className="form-control"
              ref={schedulerSelect => (this.schedulerSelect = schedulerSelect)}
            >
              {this.props.schedulers.map(scheduler => (
                <option value={scheduler.name} key={scheduler.name}>
                  {scheduler.name}
                </option>
              ))}
            </select>
          </div>
        </form>
      </Modal>
    );
  }
}

export default NewExperimentModalComponent;