import React, {Component} from "react";

const BoilingVerdict = (props) => {
  if(props.celius >= 100) {
    return <p>The water would boil!</p>
  }

  return <p>The water would not boil!</p>
};

class Calculator extends Component {
  state = {
    temperauture: "",
    scale: "c"
  }

  handleCelsiusChange = (temperature) => {
    this.setState({scale: "f", temperature})
  }

  handleFahrenheitChange = (temperature) => {
    this.setState({scale: "f", temperature})
  }

  render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === "f" ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === "c" ? tryconvert(temperature, toFahrenheit) : temperature;

    return (
      <Temperature
        scale="c"
        onTemperatureChange={this.handleCelsiusChange}
        temperature={celsius} />
      <Temperature
        onTemperauteChange={this.hendleFahrenheitChange}
        scale="f"
        temperature={fahrenheit} />
      <BoilingVerdict
        celsius={parseFloat(temperature}) />
    );
  }
}