// 温度输入组件

class TemperatureInput extends React.Component{

    handleChange(event){

        this.props.change(this.props.scale,event.target.value);

    }

    render(){

        return <p>

            <label>{this.props.scale === 'c' ? '摄氏温度' : '华氏温度'}:</label>

            <input type='text' value={this.props.value} onChange={this.handleChange.bind(this)}/>

        </p>

    }

}

// 显示是否沸腾的组件

class ShowBoil extends React.Component{

    render(){

        if(this.props.temperature >= 100){

            return <p>The water would boil</p>

        } else {

            return <p>The water would not boil</p>

        }

    }

}

// 温度计算组件

class Calculator  extends React.Component{

    constructor(props){

        super(props);

        this.state = {

            scale:'c',

            temperature:''

        };

    }

    changeState(scale,temperature){

       this.setState({scale,temperature});

    }

    covertTemperature(scale,temperature){

        if(Number.isNaN(parseFloat(temperature))){

            return ''

        }

        // 把摄氏温度转换为华氏温度

        if(scale === 'c'){

            return ((temperature * 9 / 5) + 32) + '';

        }

        // 将华氏温度转换为摄氏温度

        else {

            return ((temperature - 32) * 5 / 9 ) + '';

        }

    }

    render(){

        const scale = this.state.scale;

        const temperature = this.state.temperature;

        const cTemperature = scale === 'f'?this.covertTemperature(scale,temperature):temperature;

        const fTemperature = scale ==='c'?this.covertTemperature(scale,temperature):temperature;

        return (

            <div>

                <TemperatureInput change={this.changeState.bind(this)} value={cTemperature} scale='c'/>

                <TemperatureInput change={this.changeState.bind(this)} value={fTemperature} scale='f'/>

                <ShowBoil temperature={cTemperature}/>

            </div>

        )

    }

}