export default class DrawerBar extends Component {
  render() {
    return (
      <Drawer
        temporary
        open={this.props.opened}
        >
        <DrawerHeader>
          <headline6>Headline 6</headline6>
        </DrawerHeader>
        <DrawerContent>
          <SimpleListItem graphic="favorite" text="Body 2"/>
          <SimpleListItem graphic="favorite" text="Body 2"/>
          <SimpleListItem graphic="favorite" text="Body 2"/>
          <SimpleListItem graphic="favorite" text="Body 2"/>
          <SimpleListItem graphic="favorite" text="Body 2"/>
          <SimpleListItem graphic="favorite" text="Body 2"/>
          <SimpleListItem graphic="favorite" text="Body 2"/>
          <SimpleListItem graphic="favorite" text="Body 2"/>
        </DrawerContent>
      </Drawer>
    )
  }
}

export default class Navbar extends Component {
  render() {
    return (
      <Toolbar>
        <ToolbarRow>
          <ToolbarSection alignStart>
            <ToolbarMenuIcon use="menu" onClick={this.props.toggle}/>
            <ToolbarTitle>Syngenta Digital Innovation Lab Web UI Boilerplate</ToolbarTitle>
          </ToolbarSection>
          <ToolbarSection alignEnd>
            <ToolbarIcon use="share" onClick={this.props.login}/>
            <ToolbarIcon use="favorite" onClick={this.props.login}/>
            <ToolbarIcon use="search" onClick={this.props.login}/>
          </ToolbarSection>
        </ToolbarRow>
      </Toolbar>
    )
  }
}

class App extends Component {
  state = { drawer: false, login: false }

  drawerToggle = () => { this.setState( { ...this.state, drawer: !this.state.drawer } ) }
  loginToggle = () => { this.setState( { ...this.state, login: !this.state.login } ) }

  render() {
    return (
      <div className="app">

        <Login opened={this.state.login} toggle={this.loginToggle}/>
        <DrawerBar opened={this.state.drawer}/>
        <div className="body">
          <Navbar toggle={this.drawerToggle} login={this.loginToggle}/>
          <Feed/>

        </div>
      </div>
    );
  }
}

export default App;