import React from 'react';
import {withNamespaces} from "react-i18next";

import {withTheme, injectSheet} from '../../lib/theme';
import OrdersListItem from './OrdersListItem';

const theming = (theme) => ({
    wrapper: {
        border: 0,
        //width: '100%'
    },
    item: {},
    cell: {
        padding: theme.gutter.base * 2 + 'px',
        '&:first-child': {
            paddingLeft: 0
        },
        '&:last-child': {
            paddingRight: 0
        }
    },
    cellHead: {
        textAlign: 'left',
        padding: theme.gutter.base * 8 + 'px ' + theme.gutter.base + 'px ' + theme.gutter.base * 4 + 'px ' + theme.gutter.base + 'px '
    }
});

class OrdersList extends React.Component {

    render() {
        const {
            t, classes,
            orders, pushStateUpdate, savingStateUpdate
        } = this.props;


        return (
            <table className={classes.wrapper}>
                <tbody>
                <tr className={classes.item}>
                    <th className={classes.cellHead}>{t('list.head.date')}</th>
                    <th className={classes.cellHead}>{t('list.head.customer')}</th>
                    <th className={classes.cellHead}>{t('list.head.qty')}</th>
                    <th className={classes.cellHead}>{t('list.head.state')}</th>
                    <th className={classes.cellHead}>{t('list.head.shipping')}</th>
                    <th className={classes.cellHead}>{t('list.head.locale')}</th>
                    {/*<th className={classes.cellHead}>{t('list.head.details')}</th>*/}
                </tr>
                {orders.map((order, i) => (
                    <OrdersListItem item={order}
                                    key={i}
                                    index={i}
                                    pushStateUpdate={pushStateUpdate}
                                    savingStateUpdate={savingStateUpdate}
                    />
                ))}
                </tbody>
            </table>
        )
    };
}

export default withNamespaces('page--shop-order')(withTheme(injectSheet(theming)(OrdersList)));