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

import shopping from './zadanie02';


class Receipt extends React.Component {
    render() {


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

        return (
            <table>
                <ReceiptHeader />
                <ReceiptItems items={ this.props.shopping } />
                <ReceiptFooter sum={ sum } />
            </table>
        )
    }
}

class ReceiptHeader extends React.Component {
    render() {
        return (
            <thead>
                <tr>
                    <th>nazwa</th>
                    <th>cena</th>
                    <th>ilość</th>
                    <th>suma</th>
                </tr>
            </thead>
        )
    }
}

class ReceiptItems extends React.Component {
    render() {
        const rows = this.props.items.map(item => {
            return (
                <ReceiptItem
                    {...item}

                    price={item.price}
                    count={item.count}
                    name={item.name}
                />
            )
        });

        return (
            <tbody>
                {rows}
            </tbody>
        )
    }
}

class ReceiptItem extends React.Component {
    render() {
        return (
            <tr>
                <td>{this.props.name}</td>
                <td>{this.props.count}</td>
                <td>{this.props.price}</td>
                <td>{(this.props.count * this.props.price).toFixed(2)}</td>
            </tr>
        )
    }
}

class ReceiptFooter extends React.Component {
    render() {
        return (
                <tfoot>
                    <tr>
                        <td>Razem</td>
                        <td>-</td>
                        <td>-</td>
                        <td>{ this.props.sum.toFixed(2) }</td>
                    </tr>
                </tfoot>
        )
    }
}

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

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