import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(...stuff) {
    super(...stuff)

    this.state = {
      wc: 0,
      goal: "",
    }
  }

  render() {
    const pct = ((this.state.wc / (this.state.goal || 250)) * 100)

    return (
      <div className="App">
        <textarea ref={this.onRef.bind(this)} onChange={this.onChange.bind(this)}></textarea>
        <div className="App-status">
          <span>{this.state.wc}</span>
          <span>&nbsp;/&nbsp;</span>
          <span><input ref={this.onRef2.bind(this)} placeholder="250" onChange={this.onChange2.bind(this)} value={this.state.goal} /></span>
          <span>{ pct.toFixed(pct < 10 ? 1 : 0) }%</span>
        </div>
      </div>
    );
  }

  onRef(ta) {
    this.ta = ta
  }

  onRef2(tb) {
    this.tb = tb
  }

  onChange() {
    clearTimeout(this.timeout)
    this.timeout = setTimeout(() => {
      const wc = this.ta.value.split("\n").join(" ").split(" ").filter(t => t.length > 0).length
    
      this.setState({wc})
    }, 100)
  }

  onChange2() {
    let goal = parseInt(this.tb.value)

    if (goal > 0) {
      this.setState({goal})
    } else {
      this.setState({goal: ""})
    }
  }
}

export default App;