import React from 'react';
import "./CSS/range.css";

const Label = (props) => {
    const labelStyle = {
        fontFamily: "Verdana",
        fontSize: 20,
        display: "block",
    };

    return (
        <span style={labelStyle}>
            {props.name}: {props.value}
        </span>

    );
}

const Slider = (props) => {
    return (
        <input type="range"
               value={props.value}
               min={props.min}
               max={props.max}
               onChange={props.changeHandler}/>
    );
}


export default class BmiCalculator extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            height: 178,
            weight: 75,
            bmi: this.bmiCalc(175, 75)
        }
    }

    bmiCalc = (hoogteInCm, massa) => {
        const hoogteInM = hoogteInCm / 100;
        return Math.round(massa / (hoogteInM * hoogteInM));
    }

    changeHandlerMass = (e) => {
        this.setState({
            weight: e.target.value,
            bmi: this.bmiCalc(this.state.height, e.target.value)
        })
    }

    changeHandlerHeight = (e) => {
        this.setState({
            height: e.target.value,
            bmi: this.bmiCalc(e.target.value, this.state.weight)
        })
    }

    render() {
        const backgroundStyle = {
            paddingLeft: 40,
            paddingRight: 40,
            paddingTop: 20,
            paddingBottom: 20,
            border: "#333 2px dotted",
            width: 450,
            borderRadius: 10,
            textAlign: "left",
            marginTop: "2em"
        };

        return (
            <div style={backgroundStyle}>
                <div>
                    <Label name="Hoogte" value={this.state.height}/>
                    <Slider min={20} max={220} value={this.state.height}
                            changeHandler={(e) => this.changeHandlerHeight(e)}/>
                </div>

                <div>
                    <Label name="Gewicht" value={this.state.weight}/>
                    <Slider min={30} max={250} value={this.state.weight}
                            changeHandler={(e) => this.changeHandlerMass(e)}/>
                </div>

                <div>
                    <Label name="BMI" value={this.state.bmi}/>
                </div>

            </div>
        );
    }
}
