import React from 'react';
import ReactDOM from 'react-dom';

import shopping from './zadanie02';


class Receipt extends React.Component {
    render() {
        const rows = this.props.shopping.map(item => {
            return (
                <tr>
                    <td>{item.name}</td>
                    <td>{item.count}</td>
                    <td>{item.price}</td>
                    <td>{(item.count * item.price).toFixed(2)}</td>
                </tr>
            )
        });

        const sum = this.props.shopping.reduce((prev, curr) => {
            return prev + (curr.count * curr.price);
        }, 0);

        return (
            <table>
                <thead>
                    <tr>
                        <th>nazwa</th>
                        <th>cena</th>
                        <th>ilość</th>
                        <th>suma</th>
                    </tr>
                </thead>
                <tbody>
                    {rows}
                </tbody>
                <tfoot>
                    <tr>
                        <td>Razem</td>
                        <td>-</td>
                        <td>-</td>
                        <td>{ sum.toFixed(2) }</td>
                    </tr>
                </tfoot>
            </table>
        )
    }
}

class App extends React.Component {
    render() {
        return <Receipt shopping={ shopping } />
    }
}

document.addEventListener('DOMContentLoaded', function(){
    ReactDOM.render(
        <App/>,
        document.getElementById('app')
    );
});