import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import * as Blockly from 'blockly/core';

import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
import { withStyles } from '@material-ui/core/styles';
import Tooltip from '@material-ui/core/Tooltip';
import IconButton from '@material-ui/core/IconButton';
import Chip from '@material-ui/core/Chip';
import Avatar from '@material-ui/core/Avatar';
import Popover from '@material-ui/core/Popover';

import { faPuzzlePiece, faTrash, faPlus, faPen, faArrowsAlt, faEllipsisH } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const styles = (theme) => ({
  stats: {
    backgroundColor: theme.palette.primary.main,
    display: 'inline',
    marginLeft: '50px',
    padding: '3px 10px',
    // borderRadius: '25%'
  },
  menu: {
    backgroundColor: theme.palette.secondary.main,
    color: theme.palette.secondary.contrastText,
    width: '40px',
    height: '40px',
    '&:hover': {
      backgroundColor: theme.palette.secondary.main,
      color: theme.palette.primary.main,
    }
  }
});

class WorkspaceStats extends Component {

  state={
    anchor: null
  }

  handleClose = () => {
    this.setState({ anchor: null });
  }

  handleClick = (event) => {
    this.setState({ anchor: event.currentTarget });
  };

  render() {
    const bigDisplay = !isWidthDown('sm', this.props.width);
    const workspace = Blockly.getMainWorkspace();
    const remainingBlocksInfinity = workspace ? workspace.remainingCapacity() !== Infinity : null;
    const stats =  <div style={bigDisplay ? {display: 'flex'} : {display: 'inline'}}>
                    <Tooltip title="Anzahl aktueller Blöcke" arrow>
                      <Chip
                        style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
                        color="primary"
                        avatar={<Avatar><FontAwesomeIcon icon={faPuzzlePiece} /></Avatar>}
                        label={workspace ? workspace.getAllBlocks().length : 0}>
                      </Chip>
                    </Tooltip>
                    <Tooltip title="Anzahl neuer Blöcke" arrow>
                      <Chip
                        style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
                        color="primary"
                        avatar={<Avatar><FontAwesomeIcon icon={faPlus} /></Avatar>}
                        label={this.props.create > 0 ? this.props.create : 0}> {/* initialXML is created automatically, Block is not part of the statistics */}
                      </Chip>
                    </Tooltip>
                    <Tooltip title="Anzahl veränderter Blöcke" arrow>
                      <Chip
                        style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
                        color="primary"
                        avatar={<Avatar><FontAwesomeIcon icon={faPen} /></Avatar>}
                        label={this.props.change}>
                      </Chip>
                    </Tooltip>
                    <Tooltip title="Anzahl bewegter Blöcke" arrow>
                      <Chip
                        style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
                        color="primary"
                        avatar={<Avatar><FontAwesomeIcon icon={faArrowsAlt} /></Avatar>}
                        label={this.props.move > 0 ? this.props.move : 0}> {/* initialXML is moved automatically, Block is not part of the statistics */}
                      </Chip>
                    </Tooltip>
                    <Tooltip title="Anzahl gelöschter Blöcke" arrow>
                      <Chip
                        style={remainingBlocksInfinity ? bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'} : {}}
                        color="primary"
                        avatar={<Avatar><FontAwesomeIcon icon={faTrash} /></Avatar>}
                        label={this.props.delete}>
                      </Chip>
                    </Tooltip>
                    {remainingBlocksInfinity ?
                      <Tooltip title="Verbleibende Blöcke" arrow>
                        <Chip
                          style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
                          color="primary"
                          label={workspace.remainingCapacity()}>
                        </Chip>
                      </Tooltip> : null}
                    </div>
    return (
      bigDisplay ?
        <div style={{bottom: 0, position: 'absolute'}}>
          {stats}
        </div>
      :
        <div>
          <Tooltip title='Statistiken anzeigen' arrow>
            <IconButton
              className={this.props.classes.menu}
              onClick={(event) => this.handleClick(event)}
            >
              <FontAwesomeIcon icon={faEllipsisH} size="xs"/>
            </IconButton>
          </Tooltip>
          <Popover
            open={Boolean(this.state.anchor)}
            anchorEl={this.state.anchor}
            onClose={this.handleClose}
            anchorOrigin={{
              vertical: 'bottom',
              horizontal: 'center',
            }}
            transformOrigin={{
              vertical: 'top',
              horizontal: 'center',
            }}
            PaperProps={{
              style: {margin: '5px'}
            }}
          >
            <div style={{margin: '10px'}}>
              {stats}
            </div>
          </Popover>
        </div>
    );
  };
}

WorkspaceStats.propTypes = {
  create: PropTypes.number.isRequired,
  change: PropTypes.number.isRequired,
  delete: PropTypes.number.isRequired,
  move: PropTypes.number.isRequired,
  workspaceChange: PropTypes.number.isRequired
};

const mapStateToProps = state => ({
  create: state.workspace.stats.create,
  change: state.workspace.stats.change,
  delete: state.workspace.stats.delete,
  move: state.workspace.stats.move,
  workspaceChange: state.workspace.change
});

export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(withWidth()(WorkspaceStats)));
