content: // @flow
  
  import React from 'react';
  import { connect } from 'react-redux';
  import classnames from 'classnames';
  
  import { makeMove } from './../../actions';
  import {
      getCellIsFilledByPlayer,
      getIsPartOfWinningMove,
      getIsGameWon,
      getCurrentPlayer
  } from './../../reducer/game-board';
  
  import './cell.scss';
  
  const mapStateToProps = (state: object, ownProps: object): object => ({
      isFilledByPlayer: getCellIsFilledByPlayer(
          state,
          ownProps.row,
          ownProps.column
      ),
      isPartOfWinningMove: getIsPartOfWinningMove(
          state,
          ownProps.row,
          ownProps.column
      ),
      isGameWon: getIsGameWon(state),
      currentPlayer: getCurrentPlayer(state)
  });
  
  const Cell = (props: React.Component<Props>): React.Node => (
      <div
          className={classnames({
              cell: true,
              [`cell--filled-${props.isFilledByPlayer}`]: props.isFilledByPlayer,
              'cell--winning': props.isPartOfWinningMove,
              'cell--inert': props.isGameWon
          })}
          onClick={(): any =>
              !props.isFilledByPlayer && !props.isGameWon
                  ? props.dispatch(
                        makeMove(props.currentPlayer, {
                            y: props.row,
                            x: props.column
                        })
                    )
                  : null
          }
      />
  );
  
  export default connect(mapStateToProps)(Cell);
  