import React from 'react';

import PropTypes from 'prop-types';
import {withStyles} from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import EnhancedTableToolBar from './EnhancedTableToolBar';
import EnhancedTableHead from './EnhancedTableHead';
import EnhancedTableRow from './EnhancedTableRow';

function getSorting(order, orderBy) {
    return order === 'desc'
        ? (a, b) => (b[orderBy] < a[orderBy] ? -1 : 1)
        : (a, b) => (a[orderBy] < b[orderBy] ? -1 : 1);
}

const styles = theme => ({
    root: {
        width: '100%',
        marginTop: theme.spacing.unit * 3,
    },
    table: {
        minWidth: 1020,
    },
    tableWrapper: {
        overflowX: 'auto',
    },
});

class EnhancedTable extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            order: 'desc',
            orderBy: 'calories',
            selected: []
        };
    }

    handleRequestSort = (event, property) => {
        const orderBy = property;
        let order = 'desc';
        if (this.state.orderBy === property && this.state.order === 'desc') {
            order = 'asc';
        }
        this.setState({order, orderBy});
    };

    handleSelectAllClick = (event, checked) => {
        if (checked) {
            console.log(checked)
            this.setState(state => ({ selected: state.data.map(n => n._id) }));
            return;
        }
        this.setState({ selected: [] });
    };


    isSelected = id => this.state.selected.indexOf(id) !== -1;

    render() {
        const {
            classes,
            tableConfiguration,
            data,
            query,
            onAddItems,
            onDeleteAllItems,
            onShowItem,
            onDeleteItem,
            onPageChange,
            onPageSizeChange,
            onSelectAllClick
        } = this.props;
        const {order, orderBy, selected, rowsPerPage, page} = this.state;
        const emptyRows = rowsPerPage - Math.min(query.page.size, data.quantity - query.page.number * query.page.size);

        return (
            <Paper className={classes.root}>
                <EnhancedTableToolBar
                    numSelected={selected.length}
                    onAddItems={onAddItems}
                    onDeleteAllItems={onDeleteAllItems}/>
                <div className={classes.tableWrapper}>
                    <Table className={classes.table} aria-labelledby="tableTitle">
                        <EnhancedTableHead
                            tableConfiguration={tableConfiguration}
                            numSelected={selected.length}
                            order={order}
                            orderBy={orderBy}
                            onSelectAllClick={this.handleSelectAllClick}
                            onRequestSort={this.handleRequestSort}
                            rowCount={data.quantity}
                        />
                        <TableBody>
                            {data.items.map(item => {
                                return <EnhancedTableRow
                                    tableConfiguration={tableConfiguration}
                                    handleShowItem={onShowItem}
                                    handleDeleteItem={onDeleteItem}
                                    item={item}
                                    isSelected={this.isSelected}
                                />;
                            })}
                            {emptyRows > 0 && (
                                <TableRow style={{height: 49 * emptyRows}}>
                                    <TableCell colSpan={6}/>
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </div>
                <TablePagination
                    component="div"
                    count={data.quantity}
                    rowsPerPage={query.page.size}
                    page={query.page.number}
                    backIconButtonProps={{
                        'aria-label': 'Previous Page',
                    }}
                    nextIconButtonProps={{
                        'aria-label': 'Next Page',
                    }}
                    onChangePage={onPageChange}
                    onChangeRowsPerPage={onPageSizeChange}
                />
            </Paper>
        );
    }
}

EnhancedTable.propTypes = {
    classes: PropTypes.object.isRequired,
    tableConfiguration: PropTypes.object.isRequired,
    data: PropTypes.object.isRequired,
    query: PropTypes.object.isRequired,
    onAddItems: PropTypes.object.isRequired,
    onDeleteAllItems: PropTypes.object.isRequired,
    onShowItem: PropTypes.object.isRequired,
    onDeleteItem: PropTypes.object.isRequired,
    onPageChange: PropTypes.object.isRequired,
    onPageSizeChange: PropTypes.object.isRequired,
    onSelectAllClick: PropTypes.object.isRequired,
};

export default withStyles(styles)(EnhancedTable);