import React, { Component } from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { Link } from 'react-router-dom'
import FlatButton from 'material-ui/FlatButton'
import RaisedButton from 'material-ui/RaisedButton'
import Paper from 'material-ui/Paper'
import Avatar from 'material-ui/Avatar'

const PaperMenu = styled(Paper)`
  width:100%;
  max-width: 1024px;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  margin: auto;
  position: relative;
  padding: 10px 10px;
  @media screen and (max-width: 760px){ 
    padding: 10px;

  }
`
const MenuContainer = styled.div`
  flex: 1 0 auto;
  @media screen and (max-width: 760px){
    display: ${props => (props.visible ? 'flex' : 'none')};
    position: absolute;
    background:white;
    flex-direction:column;
    bottom:-20px;
    width:100%;
    z-index:9;
    transform: translateY(100%);
  }
`
const LoginContainer = styled.div`
  flex: 0 1 auto;
`
const Hamberger = styled.div`
  display: none;
  @media screen and (max-width: 760px) {
    display: block;
  }
`
export const LoginButton = ({ onLoginClick }) => (
  <RaisedButton label='Login with Facebook' primary onTouchTap={onLoginClick} />
)

export const LogoutButton = ({ onLogoutClick }) => (
  <RaisedButton label='Logout' primary onTouchTap={onLogoutClick} />
)

export class Menubar extends Component {
  constructor (props) {
    super(props)
    this.state = {
      isShowMenu: false
    }
  }
  render () {
    const { firedux, authed, onLoginClick, onLogoutClick } = this.props
    const unshowMenu = () =>
      setTimeout(() => {
        this.setState({ isShowMenu: false })
      }, 300)

    return (
      <div style={{ textAlign: 'center' }}>
        <PaperMenu zDepth={1} rounded={false}>
          <Hamberger
            onClick={() =>
              this.setState({ isShowMenu: !this.state.isShowMenu })}
          >
            Menu
          </Hamberger>
          <MenuContainer visible={this.state.isShowMenu}>
            <FlatButton
              containerElement={<Link to='/' />}
              label='LEADERBOARD'
              rippleColor='black'
              onTouchTap={unshowMenu}
              style={{ verticalAlign: 'bottom' }}
            />
            <FlatButton
              label='PLAY QUIZ'
              rippleColor='cyan'
              onTouchTap={unshowMenu}
              href='https://www.facebook.com/messages/t/122419575009686'
              target='_blank'
            />
            <FlatButton
              containerElement={<Link to='/myquiz' />}
              label='MY QUIZ'
              rippleColor='black'
              disabled={!authed}
              onTouchTap={unshowMenu}
              style={{ verticalAlign: 'bottom' }}
            />
          </MenuContainer>
          {!authed
            ? <LoginContainer>
              <LoginButton onLoginClick={onLoginClick} />
            </LoginContainer>
            : <LoginContainer>
              <Avatar
                src={firedux.photoURL}
                style={{
                  textAlign: 'center',
                  verticalAlign: 'bottom'
                }}
                />
              <span>{' '}{firedux.displayName}{' '}</span>
              <LogoutButton
                onLogoutClick={onLogoutClick}
                style={{ display: 'inline' }}
                />
            </LoginContainer>}
        </PaperMenu>
      </div>
    )
  }
}

Menubar.PropTypes = {
  firedux: PropTypes.object,
  authed: PropTypes.bool,
  onLoginClick: PropTypes.func,
  onLogoutClick: PropTypes.func
}

export default Menubar

@@ -325,16 +325,175 @@
 /Avatar'
+%0Aimport FontIcon from 'material-ui/FontIcon'%0Aimport IconButton from 'material-ui/IconButton'%0Aimport NevigationMenu from 'material-ui/svg-icons/navigation/menu'
 %0A%0Aconst 
@@ -2071,20 +2071,87 @@
         
-Menu
+%3CIconButton%3E%0A              %3CNevigationMenu /%3E%0A            %3C/IconButton%3E
 %0A       

Add menu icon