import React, { Component } from"react";
import './MenuButton.css';
import './MenuContainer.css';
import MenuButton from './MenuButton';
import Menu from './Menu';
import serverCall from"../api/ServerCall";
import {BootstrapTable,TableHeaderColumn} from 'react-bootstrap-table';
import '../../node_modules/react-bootstrap-table/css/react-bootstrap-table.css'


class MenuContainer extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            visible: false
        };
        this.handleMouseDown = this.handleMouseDown.bind(this);
        this.toggleMenu = this.toggleMenu.bind(this);

        this.getCustomers();
    }

    handleMouseDown(e) {
        this.toggleMenu();
        e.stopPropagation();
    }

    toggleMenu() {
        this.setState({
            visible: !this.state.visible
        });
    }

     getCustomers(){
              console.log("Getting Customers");
        serverCall(function(error, response) {
            if (error) {
                alert("Authorization Failed.")
            } else {
                console.log(response);

            }
        },"","customers.php");
    }

    render() {


        let products = [{
            id: 1,
            name:"Item name 1",
            price: 100
        },{
            id: 2,
            name:"Item name 2",
            price: 100
        }];

        return (

           
               
                   
                        <MenuButton handleMouseDown={this.handleMouseDown}/>
                        <Menu handleMouseDown={this.handleMouseDown} menuVisibility={this.state.visible}/>
                   

                   
                        Dashboard | Customers
                   

                   
                   

                   

                        <BootstrapTable data={ products }>
                            <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
                            <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
                            <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
                        </BootstrapTable>
               
               
           
        );
    }
}

export default MenuContainer;