import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import CircularProgress from 'material-ui/CircularProgress';
import IconButton from 'material-ui/IconButton';
import IconMenu from 'material-ui/IconMenu';
import FlatButton from 'material-ui/FlatButton';
import Avatar from 'material-ui/Avatar';
import AppBar from 'material-ui/AppBar';
import MenuItem from 'material-ui/MenuItem';
import Drawer from 'material-ui/Drawer';
import SettingsIcon from 'material-ui/svg-icons/action/settings';
import injectTapEventPlugin from 'react-tap-event-plugin';
import Snackbar from 'material-ui/Snackbar';
import c from 'classnames';

import {setIntl, setDrawerOpen, toggleDrawerOpen, setSnackBarParams} from './../../redux/modules/main';
import {login, logout} from './../../redux/modules/auth';
import muiTheme from './../../constants/muiTheme';
import injectF from './../../helpers/injectF';
import injectPush from './../../helpers/injectPush';

const styles = require('./App.scss');

injectTapEventPlugin();

@connect(({auth, main}) => ({
  appLocale: main.get('appLocale'),
  isDrawerOpen: main.get('isDrawerOpen'),
  isLoadingAuth: auth.get('isLoadingAuth'),
  snackBarMessage: main.get('snackBarMessage'),
  isSnackBarOpen: main.get('isSnackBarOpen'),
  auth: auth.get('auth')
}), {setDrawerOpen, toggleDrawerOpen, setIntl, setSnackBarParams, login, logout})
@injectF
@injectPush
export default class App extends Component {

  static propTypes = {
    f: PropTypes.func.isRequired,
    push: PropTypes.func.isRequired,
    appLocale: PropTypes.string.isRequired,
    isDrawerOpen: PropTypes.bool.isRequired,
    isLoadingAuth: PropTypes.bool.isRequired,
    snackBarMessage: PropTypes.string.isRequired,
    isSnackBarOpen: PropTypes.bool.isRequired,
    setSnackBarParams: PropTypes.func.isRequired,
    login: PropTypes.func.isRequired,
    logout: PropTypes.func.isRequired,
    auth: PropTypes.object,
    toggleDrawerOpen: PropTypes.func.isRequired,
    setDrawerOpen: PropTypes.func.isRequired,
    setIntl: PropTypes.func.isRequired,
    children: PropTypes.object.isRequired
  };

  renderIconElementRight() {
    const {auth, isLoadingAuth, login, logout, f} = this.props;

    if (isLoadingAuth) {
      return <CircularProgress mode="indeterminate" color="white" style={{marginTop: '16px', marginRight: '12px'}} size={30} />;
    }

    if (auth) {

      const {profile} = auth;

      const iconButton = (
        <IconButton style={{width: '64px', height: '64px', marginRight: 0}} disableTouchRipple>
          <div>
            <div className="hidden-mobile">
              <Avatar src={profile.image.url} />
            </div>
            <div>
              <span className="hidden-mobile">{profile.displayName}</span>
            </div>
          </div>
        </IconButton>
      );

      return (
        <IconMenu
          iconButtonElement={iconButton}
          targetOrigin={{horizontal: 'right', vertical: 'top'}}
          anchorOrigin={{horizontal: 'right', vertical: 'bottom'}}>
          <MenuItem primaryText="Account" onTouchTap={this.goToAccountPage} />
          <MenuItem primaryText="Sign out" onTouchTap={logout} />
        </IconMenu>
      );
    }
    return <FlatButton style={{marginTop: '14px', color: '#fff'}} onClick={login} label={f('login')} />;
  }

  handleDrawerChange = (open) => this.props.setDrawerOpen(open);

  handleHamburgerTouchTap = () => this.props.toggleDrawerOpen();

  handleMenuItemTouchTap = (route) => {
    return () => {
      this.props.setDrawerOpen(false);
      this.props.push(route);
    };
  };

  handleSnackBarRequestClose = () => this.props.setSnackBarParams(false);

  render() {

    const {children, isDrawerOpen, f, isSnackBarOpen, snackBarMessage, appLocale} = this.props;

    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <div className={c(styles.app, appLocale)}>

          <div className={styles.appBarWrap}>
            <div className={styles.appBar}>
              <AppBar title={f('garchen')} iconElementRight={this.renderIconElementRight()} style={{paddingLeft: 0, paddingRight: 0, boxShadow: 'none'}}
                titleStyle={{cusror: 'pointer'}} iconStyleRight={{marginTop: 0, marginRight: 0, marginLeft: 0}}
                onLeftIconButtonTouchTap={this.handleHamburgerTouchTap} onTitleTouchTap={this.handleTitleTouchTap} />
            </div>
          </div>

          <div className={styles.appContent}>{children}</div>

          <Drawer docked={false} open={isDrawerOpen} onRequestChange={this.handleDrawerChange}>
            <MenuItem primaryText={f('folders')} onTouchTap={this.handleMenuItemTouchTap('/')} />
            <MenuItem primaryText={f('about')} onTouchTap={this.handleMenuItemTouchTap('/about')} />

            <hr className="divider" />
            <MenuItem primaryText={f('settings')} leftIcon={(<SettingsIcon />)} onTouchTap={this.handleMenuItemTouchTap('/settings')} />
          </Drawer>
          <Snackbar open={isSnackBarOpen} message={snackBarMessage} autoHideDuration={4000} onRequestClose={this.handleSnackBarRequestClose} />
        </div>
      </MuiThemeProvider>
    );
  }
}

@@ -2484,17 +2484,16 @@
 = auth;%0A
-%0A
       co
@@ -2506,20 +2506,25 @@
 onButton
+Style
  = 
-(
+%7B
 %0A       
@@ -2528,351 +2528,330 @@
     
-%3CIconButton style=%7B%7Bwidth: '64px', height: '64px', marginRight: 0%7D%7D disableTouchRipple%3E%0A          %3Cdiv%3E%0A            %3Cdiv className=%22hidden-mobile%22%3E%0A              %3CAvatar src=%7Bprofile.image.url%7D /%3E%0A            %3C/div%3E%0A            %3Cdiv%3E%0A              %3Cspan className=%22hidden-mobile%22%3E%7Bprofile.displayName%7D%3C/span%3E%0A            %3C/div%3E%0A          %3C/div
+width: 'initial',%0A        height: 'initial',%0A        border: 0,%0A        paddingTop: '12px',%0A        paddingBottom: '12px',%0A        marginRight: 0,%0A        marginTop: 0%0A      %7D;%0A%0A      const iconButton = (%0A        %3CIconButton style=%7BiconButtonStyle%7D disableTouchRipple%3E%0A          %3CAvatar src=%7Bprofile.image.url%7D size=%7B30%7D /
 %3E%0A  
@@ -3313,10 +3313,9 @@
 p: '
-14
+9
 px',

update profile icon style