import React, { Component } from 'react'

export class Form extends Component {
  constructor(props) {
    super(props)
    this.state = {
      tolStart: 0.1,
      tolStep: 0.1,
      tolEnd: 1,
      highQual: true,
      chart: 'wasmVsJs',
      benchMethod: 'iteration',
      iterations: 10,
      timeToRun: 200
    }

    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.props.onFormChange(this.state)
  }

  handleSubmit(event) {
    event.preventDefault()
    this.props.onFormSubmit()
  }

  handleInputChange(event) {
    let name, value
    const target = event.target
    value = target.type === 'checkbox' ? target.checked : target.value
    value = target.type === 'number' ? Number(value) : value
    value = target.type === 'range' ? Number(value) : value
    name = target.name
    this.setState({ [name]: value })
    this.props.onFormChange({ ...this.state, [name]: value })
  }

  render() {
    return (
      <div id="form-component">
        <h2>Settings</h2>
        <form onSubmit={this.handleSubmit}>
          <label>Tolerance start: </label>
          <input
            name="tolStart"
            type="number"
            min="0.001"
            max="1"
            step="0.001"
            value={this.state.tolStart}
            onChange={this.handleInputChange}
          />

          <label>Tolerance step: </label>
          <input
            name="tolStep"
            type="number"
            min="0.001"
            max="1"
            step="0.001"
            value={this.state.tolStep}
            onChange={this.handleInputChange}
          />

          <label>Tolerance end: </label>
          <input
            name="tolEnd"
            type="number"
            min="0.01"
            max="5"
            step="0.01"
            value={this.state.tolEnd}
            onChange={this.handleInputChange}
          />

          <label>high Quality: </label>
          <input
            name="highQual"
            type="checkbox"
            checked={this.state.highQual}
            onChange={this.handleInputChange}
          />

          <label>Chart: </label>
          <select
            name="chart"
            value={this.state.chart}
            onChange={this.handleInputChange}
          >
            <option value="wasmVsJs">simplifyWasm vs. simplifyJS</option>
            <option value="wasmStack">wasmStack</option>
            <option value="simplifyStack">simplifyStack</option>
          </select>

          <label>Benchmarking method: </label>
          <select
            name="benchMethod"
            value={this.state.benchMethod}
            onChange={this.handleInputChange}
          >
            <option value="iteration">
              Iterations (fast - low significance)
            </option>
            <option value="benchmarkJS">
              BenchmarkJS (slow - statistically significant)
            </option>
            <option value="opsPerTime">
              OpsPerTime (slow - low significance)
            </option>
          </select>
          {this.state.benchMethod === 'iteration' && (
            <label>Iterations ({this.state.iterations})</label>
          )}
          {this.state.benchMethod === 'iteration' && (
            <input
              name="iterations"
              type="range"
              min="1"
              max="100"
              step="1"
              value={this.state.iterations}
              onChange={this.handleInputChange}
            ></input>
          )}
          {this.state.benchMethod === 'opsPerTime' && (
            <label>Time to run ({this.state.timeToRun}ms)</label>
          )}
          {this.state.benchMethod === 'opsPerTime' && (
            <input
              name="timeToRun"
              type="range"
              min="100"
              max="1000"
              step="10"
              value={this.state.timeToRun}
              onChange={this.handleInputChange}
            ></input>
          )}

          <input type="submit" value="run" />
        </form>
      </div>
    )
  }
}