import React from 'react';
import BigOrderComponent from './BigOrderComponent.jsx';
import { Segment, Table } from 'semantic-ui-react';

export default class BigOrderTable extends React.Component {
    render() {
        if (this.props.loading) {
            return (
                <Segment basic loading={this.props.loading} />
            );
        } else {
            return (
                <Table celled striped compact>
                    <Table.Header>
                        <Table.Row>
                            <Table.HeaderCell collapsing width={2}>Order #</Table.HeaderCell>
                            <Table.HeaderCell width={1} collapsing>Created At</Table.HeaderCell>
                            <Table.HeaderCell width={1} collapsing>Last Updated</Table.HeaderCell>
                            <Table.HeaderCell width={2} collapsing>Customer info</Table.HeaderCell>
                            <Table.HeaderCell width={2} collapsing>Items</Table.HeaderCell>
                            <Table.HeaderCell width={2} collapsing>IPD</Table.HeaderCell>
                            <Table.HeaderCell width={1} collapsing>Status</Table.HeaderCell>
                        </Table.Row>
                    </Table.Header>
                    <Table.Body>
                        {this.props.orders.map(order => (
                            <BigOrderComponent schemas={this.props.schemas} asTableRow={true} key={order.id} bigOrder={order} showDetail={this.props.showDetail} />
                        ))}
                    </Table.Body>
                </Table>
            );
        }
    }
}