import React from 'react';

const Label = (props) => {
    const labelStyle = {
        fontFamily: "Verdana",
        color: "white",
        fontSize : "2em",
        minHeight: "2em"
    };

    return <div style={labelStyle}>{props.text}</div>;
}

const Button = (props) => {
    const buttonStyle = {
        fontFamily: "Verdana",
        fontSize: "2rem",
        margin: ".25em",
        fontWeight: "bold",
        backgroundColor: "#CCCCCC",
        color: "white",
        borderRadius: 5,
        width: "2em",
        height: "2em",
        display: "inline-block",
        textAlign: "center",
        lineHeight: "2em"
    };
    return <div style={buttonStyle} onClick={props.clickHandler}>{props.value}</div>;
}

export default class Calculator extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            label: ""
        }
    }

    handleClick = (button) => {
        let newLabel = "";
        if (button === "Del") {
            newLabel = this.state.label.slice(0, -1);
        } else if (button === "C") {
            newLabel = "";
        } else {
            newLabel = this.state.label + button;
        }

        this.setState({
            label: newLabel
        })
    }

    render = () => {
        const backgroundStyle = {
            padding: "1.5em 2em",
            backgroundColor: "#00ace6",
            maxWidth: "15em",
            borderRadius: 10,
            textAlign: "left",
            marginTop: "2em"
        };

        const buttons = ["7", "8", "9", "4", "5", "6", "1", "2", "3", "C", "0", "Del"];

        return (
            <div style={backgroundStyle}>
                <Label text={this.state.label}/>
                {buttons.map(b => <Button key={b} clickHandler={(e) => this.handleClick(b)} value={b}/>)}
            </div>
        );
    }
}

