content: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { Icon } from 'react-fa';
  import { Row, Col } from 'react-flexbox-grid';
  import styled from 'styled-components';
  
  const CountCell = styled.div`
    border: 1px solid #5C57B1;
    width: 320px;
    display: flex;
    justify-content: center;
    height: 50px;
    align-items: center;
    cursor: move;
  `;
  
  const Score = styled.span`
    color: #74D8FF;
    font-size: 26px;
    font-weight: bold;
    padding: 0 0.5em;
    display: inline-block;
    width: 30px;
    text-align: center;
  `;
  const ScoreName = styled.span`
    color: white;
    font-size: 20px;
    padding: 0 0.5em;
    display: inline-block;
    width: 160px;
    text-align: center;
  `;
  const CountButton = styled.button`
    transition: all 250ms;
  `;
  
  const DeleteButton = styled.button`
      position: relative;
      transition: all 250ms;
      transform: rotate(360deg);
      font-size: 27px;
      right: 20px;
      color: white;
      border: 0;
      background: rgba(255, 255, 255, 0.0);
      box-sizing: border-box;
      text-align: center;
      text-decoration: none;
      letter-spacing: 1px;
      transition-timing-function: ease-in;
      &:hover {
        transform: rotate(-360deg);
  
      }
  `;
  
  class Counter extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        score: 0,
        countInfo: [],
        evilName: '',
        color: '#6E68C5',
        scoreColor: '#74D8FF',
        fontAwe: 'score-icon',
        incrementcolor: '',
        scoreNameColor: 'white',
        displayInfo: 'block',
        glow: '',
        buttonStyle: 'count-button-start',
        totalScore: this.props.incrementCountTotal
      };
  
      this.incrementCount = this.incrementCount.bind(this);
      this.decrementCount = this.decrementCount.bind(this);
      this.removePlayer = this.removePlayer.bind(this);
    }
  
    incrementCount(props) {
      this.setState({
        score: this.state.score + 1
      });
      if (this.state.score < 0) {
        this.setState({ color: '#6E68C5' });
        this.setState({ scoreNameColor: 'white' });
        this.setState({ buttonStyle: 'count-button-start' });
        this.setState({ fontAwe: 'fontAwe: score-icon' });
        this.setState({ scoreColor: '#74D8FF' });
        this.setState({ evilName: '' });
      } else if (this.state.score === 9) {
        this.setState({ scoreColor: 'white' });
      } else if (this.state.score === 19) {
        this.setState({ glow: '1px 2px 5px #74D8FF' });
      }
    }
  
    decrementCount() {
      this.setState({
        score: this.state.score - 1
      });
      if (this.state.score < 0) {
        this.setState({ color: '#381919' });
        this.setState({ scoreNameColor: '#F79D05' });
        this.setState({ buttonStyle: 'count-button-hovering' });
        this.setState({ fontAwe: 'fontAwe: score-icon-switch' });
        this.setState({ scoreColor: '#F79D05' });
        this.setState({ evilName: 'Darth ' });
      } else if (this.state.score === -1) {
        this.setState({ glow: '1px 2px 5px red' });
      } else if (this.state.score === 11) {
        this.setState({ scoreColor: '#74D8FF' });
      } else if (this.state.score === 21) {
        this.setState({ glow: '' });
      }
    }
  
    removePlayer() {
      this.setState({ displayInfo: 'none' });
      console.log('remove');
    }
  
    render() {
      const {
        name
        // sortableGroupDecorator,
        // decrementCountTotal,
        // incrementCountTotal,
        // removePlayer
      } = this.props;
  
      return (
        <div style={{ display: this.state.displayInfo }} id="cell">
          <CountCell
            id="transition-hover"
            style={{ background: this.state.color }}
          >
            <Row style={{ alignItems: 'center', marginLeft: '-42px' }}>
              <Col>
                <DeleteButton
                  id="transition-hover-content"
                  onClick={() => this.props.removePlayer(this.props.player.id)}
                >
                  <Icon name="delete" className="delete-adjust fa-minus-circle" />
                </DeleteButton>
              </Col>
              <Col>
                <CountButton
                  className={this.state.buttonStyle}
                  onClick={event => {
                    this.props.incrementCountTotal();
                    this.incrementCount();
                  }}
                >
                  <Icon
                    name="icon"
                    className={'fa fa-plus ' + this.state.fontAwe}
                  />
                </CountButton>
              </Col>
  
              <Col>
                <ScoreName style={{ color: this.state.scoreNameColor }}>
                  {this.state.evilName + name}
                </ScoreName>
              </Col>
              <Col>
                <Score
                  style={{
                    color: this.state.scoreColor,
                    textShadow: this.state.glow
                  }}
                >
                  {this.state.score}
                </Score>
              </Col>
              <Col>
                <CountButton
                  className={this.state.buttonStyle}
                  onClick={event => {
                    this.props.decrementCountTotal();
                    this.decrementCount();
                  }}
                >
                  <Icon
                    name="icon"
                    className={'fa fa-minus ' + this.state.fontAwe}
                  />
                </CountButton>
              </Col>
            </Row>
          </CountCell>
        </div>
      );
    }
  }
  
  Counter.propTypes = {
    player: PropTypes.object.isRequired
  };
  
  export default Counter;
  