content: import React from 'react';
  import { Component, CSSProperties } from 'react';
  import PropTypes from 'prop-types';
  import { bindActionCreators } from 'redux';
  import { connect } from 'react-redux';
  import MenuIcon from '@material-ui/icons/Menu';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import IconButton from '@material-ui/core/IconButton';
  import Typography from '@material-ui/core/Typography';
  import { withStyles } from '@material-ui/core/styles';
  import Devices from '@material-ui/icons/Devices';
  import Badge from '@material-ui/core/Badge';
  // import * as DialogReduxActions from '../../../redux/actions/dialog';
  // import { DialogActionsProps } from '../../../redux/actions/dialog';
  
  const styles: { [key: string]: CSSProperties } = {
    root: {
      flexGrow: 1,
    },
    toolbar: {
      boxSizing: 'border-box',
      userSelect: 'none',
      webkitAppRegion: 'drag',
      cursor: 'default',
      display: 'var(--toolbar-display, flex)',
      flexDirection: 'row',
      alignItems: 'center',
      width: '100%',
      height: '64px',
      backgroundColor: 'var(--toolbar-background, #20a8d8)',
      visibility: 'var(--toolbar-visibility)',
      flexShrink: 0,
      boxShadow: 'rgba(0, 0, 0, 0.2) 0px 5px 6px -3px',
      zIndex: 2,
    },
    flex: {
      flex: 1,
    },
    menuButton: {
      marginLeft: -12,
      marginRight: 20,
    },
  };
  
  export interface ToolbarProps {
    style?: CSSProperties;
    title?: string;
    onToggleClick?: any;
    classes?: any;
  }
  
  class ToolbarMenu extends Component<ToolbarProps, any> {
    static contextTypes = {};
    state = {
      anchorEl: null,
      connected: false,
    };
    constructor(props, context) {
      super(props, context);
    }
    componentDidMount() {}
    handleClose = () => {
      this.setState({ anchorEl: null });
    };
    handleMenu = event => {
      // const { showDialog } = this.props
      // showDialog({ shouldShowDialog: true });
    };
    render() {
      const { classes } = this.props;
      return (
        <div className={classes.toolbar}>
          <AppBar>
            <Toolbar>
              <IconButton
                onClick={this.onToggleButtonClick}
                className={classes.menuButton}
                color="secondary"
                aria-label="Menu">
                <MenuIcon />
              </IconButton>
  
              <Typography variant="title" color="secondary" className={classes.flex}>
                {this.props.title || 'Dashboard'}
              </Typography>
  
              <IconButton
                id="connect-btn"
                aria-owns={open ? 'menu-appbar' : null}
                aria-haspopup="true"
                onClick={this.handleMenu}
                color="secondary">
                <Badge
                  badgeContent=""
                  className={classes.badge}
                  color={this.state.connected ? 'secondary' : 'primary'}>
                  <Devices />
                </Badge>
              </IconButton>
            </Toolbar>
          </AppBar>
        </div>
      );
    }
    onToggleButtonClick = e => {
      if (this.props.onToggleClick) {
        this.props.onToggleClick(e);
      }
    };
  }
  // function mapDispatchToProps(dispatch) {
  //   return bindActionCreators((DialogReduxActions as any), dispatch);
  // }
  
  export default connect(null, null)(withStyles(styles)(ToolbarMenu));
  