import React from 'react'
import { Layout, AppBar, Navigation, Link, NavDrawer, Panel } from 'react-toolbox'
import theme from './Wrapper.css'

class Wrapper extends React.Component {
  state = {
    drawerActive: false,
    drawerPinned: false,
    sidebarPinned: false
  }

  toggleDrawerActive = () => {
    this.setState({ drawerActive: !this.state.drawerActive })
  }

  render() {
    return (
      <Layout>
        <NavDrawer active={this.state.drawerActive}
                   pinned={this.state.drawerPinned} permanentAt="lg"
                   onOverlayClick={this.toggleDrawerActive}>
          <p>test</p>
        </NavDrawer>
        <Panel>
          <AppBar title="Test" leftIcon="menu" onLeftIconClick={this.toggleDrawerActive} theme={theme}>
          </AppBar>
          {this.props.children}
        </Panel>
      </Layout>
    )
  }
}

export default Wrapper