import React, { Component } from 'react'
import ReactDOM from 'react-dom'

import { Form } from './components/form.js'
import { DebouncedChart, Chart } from './components/chart.js'
import { BenchmarkRunner } from './components/runner.js'

import { simplifyMapper } from './simplifyMapper.js'

class App extends Component {
  constructor(props) {
    super(props)
    this.handleFormChange = this.handleFormChange.bind(this)
    this.handleStatsChange = this.handleStatsChange.bind(this)

    this.state = {
      stats: {},
      formState: {},
      nodeData: []
    }
  }

  async handleFormChange(formState) {
    this.setState({
      formState,
      nodeData: await simplifyMapper(formState),
      stats: {}
    })
  }

  handleStatsChange(stats) {
    this.setState({ stats })
  }

  render() {
    let ChartComponent = this.state.formState.debouncedChart
      ? DebouncedChart
      : Chart
    return (
      <>
        <Form onFormChange={this.handleFormChange} />
        <BenchmarkRunner
          formState={this.state.formState}
          onStatsChange={this.handleStatsChange}
        />
        <ChartComponent
          formState={this.state.formState}
          stats={this.state.stats}
          nodeData={this.state.nodeData}
        />
      </>
    )
  }
}

ReactDOM.render(<App />, document.getElementsByTagName('main')[0])