const reducer = (state = initialState, action) => {

    switch(action.type) {

        // REST
            case 'RECEIVED_PRODUCTS':
                return Object.assign({}, ...state, {products: action.products});


        // KEYBOARD

            // SEARCHBAR
                case 'SEARCH_CHANGE':
                    return Object.assign({}, state, { searchWord: [...state.searchWord, action.text] });
                case 'SEARCH_CHANGE_CORRECT':
                    return Object.assign({}, state, { searchWord: state.searchWord.slice(0, state.searchWord.length-1)});
                case 'SEARCH_CHANGE_SPACE':
                    return Object.assign({}, state, { searchWord: [...state.searchWord, ' ']});
                case 'SEARCH_CHANGE_DELETE':
                    return Object.assign({}, state, { searchWord: ''});

            // VIRTUAL KEYBOARD
                case 'TOGGLE_KEYBOARD':
                    return Object.assign({}, state, { toggleKeyboard: !state.toggleKeyboard});


        // BUTTONSGRID
            case 'PRODUCT_ADD':
                return Object.assign( {}, state, {basket: [...state.basket, action.product]});


        // BASKET
            case 'PRODUCT_REMOVE':
                var removedFromBasket = state.basket.filter(function(product) {return product !== action.product});
                return Object.assign( {}, state, {basket : removedFromBasket});
            case 'PRODUCT_SET_COUNT':
                break;

        default:
            return state;
    }
}

class Basket extends React.Component {


    productClicked = (row) => {
        console.log(row.description);
      }

    removeProductFromBasket = (product) => {
        console.log("Removing product")
    }
    render() {
        return (
            <div>
                <ReactTable
                    data = {this.props.basket}
                    columns= {[
                        {
                            Header: "Name",
                            accessor: "description"
                        },
                        {
                            Header: "Preis",
                            id: "salesPrice",
                            width: 50,
                            accessor: p => p.salesPrice,
                        },
                        {
                            Header: "Anzahl",
                            id: 'purchasePrice',
                            accessor: "purchasePrice",
                            Cell:({row}) => (<Button onClick={() => this.productClicked(row)}>{row.purchasePrice} Stk.</Button>)
                        },
                    ]}
                />
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        basket: state.basket
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        searchChanged: (data) => {
            let action = undefined;
            dispatch(action);
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Basket);

const mapStateToProps = (state) => {
    return {
        basket: state.basket,
        products: state.products
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onButtonPress: (data) => {
            let action = { type: 'PRODUCT_ADD', product: data };
            dispatch(action);
        },
        getProducts : function() {
            dispatch(getProducts());
        }
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(ButtonsGrid);

const initialState = {

    // KEYBOARD
    searchWord: '',
    toggleKeyboard: false,

    // BASKET
    basket: [],

    // PRODUCTS
    products: []
};