import React from 'react';

import './App.css';

class App extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            result: 0,
            operator: null
        }

    }

    setNumber(number) {

        if (this.state.result === 0) {
            this.setState({result: number})
        } else if (this.state.operator === '+') {
            this.setState({
                result: this.state.result + number,
                operator: null
            })
        } else if (this.state.operator === null) {
            this.setState({result: parseInt(`${this.state.result}${number}`)})
        }

    }

    addition() {
        this.setState({operator: '+'})
    }

    render() {

        return (
            <div className="App">
                <header className="App-header">

                    <span> Resultat: {this.state.result} </span>

                    <table>
                        <tbody>

                            <tr>
                                <td onClick={() => {
                                    this.setNumber(1)
                                }} > 1</td>
                                <td onClick={() => {
                                    this.setNumber(2)
                                }}>2</td>
                                <td onClick={() => {
                                    this.setNumber(3)
                                }}>3</td>
                                <td onClick={() => {
                                    this.addition()
                                }} >+</td>
                            </tr>

                            <tr>
                                <td>4</td>
                                <td>5</td>
                                <td>6</td>
                                <td>*</td>
                            </tr>

                            <tr>
                                <td>7</td>
                                <td>8</td>
                                <td>9</td>
                                <td>/</td>
                            </tr>
                        </tbody>

                    </table>

                </header>
            </div>
        );

    }


}

export default App;