const React = require('react');
const { connect } = require('react-redux');

const { touchSquare } = require('../actions');
const { ANIMATION_EXPRESSION_TYPES, BOARD_TYPES, PARAMETERS } = require('../immutable/constants');
const { animations } = require('../immutable/animations');
const { isArrivedToDestination } = require('../state-models/bullet');
const { createEffectiveCoordinates } = require('../state-models/effect');
const { createNewPlacementState } = require('../state-models/placement');
const Board = require('../components/Board');
const SquareMatrix = require('../components/SquareMatrix');


class BattleBoard extends React.Component {
  render() {
    const handleTouchStartPad = (event, { coordinate }) => {
      const placement = createNewPlacementState(BOARD_TYPES.BATTLE_BOARD, coordinate);
      this.props.dispatch(touchSquare(placement));
    };

    return <Board
      rowLength={ PARAMETERS.BATTLE_BOARD_ROW_LENGTH }
      columnLength={ PARAMETERS.BATTLE_BOARD_COLUMN_LENGTH }
      additionalClassNames={ ['root__battle-board'] }
    >
      <SquareMatrix
        squareMatrix={ this.props.battleBoard.squareMatrix }
        cursorCoordinate={ this.props.cursorCoordinate }
        bullets={ this.props.bullets }
        squareBasedAnimations={ this.props.squareBasedAnimations }
        units={ this.props.enemiesInBattle }
        unitsOnSquares={ this.props.unitsOnSquares }
        handleTouchStartPad={ handleTouchStartPad }
      />
    </Board>;
  }
}

BattleBoard = connect(state => {
  const cursorCoordinate =
    state.cursor.placement.boardType === BOARD_TYPES.BATTLE_BOARD ? state.cursor.placement.coordinate : null;

  const squareBasedAnimations = state.bullets
    .filter(bullet => {
      const boardAnimation = animations[bullet.effect.animationId];

      return boardAnimation.expression.type === ANIMATION_EXPRESSION_TYPES.SQUARE_BASED &&
        isArrivedToDestination(bullet);
    })
    .map(bullet => {
      const boardAnimation = animations[bullet.effect.animationId];

      return {
        uid: bullet.effect.uid,
        coordinates: createEffectiveCoordinates(bullet.effect),
        duration: boardAnimation.duration,
        classNames: [
          ...boardAnimation.expression.classNames,
          boardAnimation.getAnimationDurationClassName(),
        ],
      };
    })
  ;

  const enemiesInBattle = state.enemies.filter(enemy => enemy.location);

  const unitsOnSquares =
    state.allies.filter(ally => ally.placement.boardType === state.battleBoard.boardType);

  return Object.assign({}, state, {
    cursorCoordinate,
    enemiesInBattle,
    unitsOnSquares,
    squareBasedAnimations,
  });
})(BattleBoard);


module.exports = BattleBoard;

const React = require('react');
const { connect } = require('react-redux');

const { touchSquare } = require('../actions');
const { ANIMATION_DESTINATION_TYPES, BOARD_TYPES, PARAMETERS } = require('../immutable/constants');
const { animations } = require('../immutable/animations');
const { isArrivedToDestination } = require('../state-models/bullet');
const { createEffectiveCoordinates } = require('../state-models/effect');
const { createNewPlacementState } = require('../state-models/placement');
const Board = require('../components/Board');
const SquareMatrix = require('../components/SquareMatrix');


class BattleBoard extends React.Component {
  render() {
    const handleTouchStartPad = (event, { coordinate }) => {
      const placement = createNewPlacementState(BOARD_TYPES.BATTLE_BOARD, coordinate);
      this.props.dispatch(touchSquare(placement));
    };

    return <Board
      rowLength={ PARAMETERS.BATTLE_BOARD_ROW_LENGTH }
      columnLength={ PARAMETERS.BATTLE_BOARD_COLUMN_LENGTH }
      additionalClassNames={ ['root__battle-board'] }
    >
      <SquareMatrix
        squareMatrix={ this.props.battleBoard.squareMatrix }
        cursorCoordinate={ this.props.cursorCoordinate }
        bullets={ this.props.bullets }
        squareBasedAnimations={ this.props.squareBasedAnimations }
        units={ this.props.enemiesInBattle }
        unitsOnSquares={ this.props.unitsOnSquares }
        handleTouchStartPad={ handleTouchStartPad }
      />
    </Board>;
  }
}

BattleBoard = connect(state => {
  const cursorCoordinate =
    state.cursor.placement.boardType === BOARD_TYPES.BATTLE_BOARD ? state.cursor.placement.coordinate : null;

  const squareBasedAnimations = state.bullets
    .filter(bullet => {
      return bullet.effect.animationDestinationType === ANIMATION_DESTINATION_TYPES.SQUARE &&
        isArrivedToDestination(bullet);
    })
    .map(bullet => {
      const animation = animations[bullet.effect.animationId];

      return {
        uid: bullet.effect.uid,
        coordinates: createEffectiveCoordinates(bullet.effect),
        duration: animation.duration,
        classNames: [
          ...animation.expression.classNames,
          animation.getAnimationDurationClassName(),
        ],
      };
    })
  ;

  const enemiesInBattle = state.enemies.filter(enemy => enemy.location);

  const unitsOnSquares =
    state.allies.filter(ally => ally.placement.boardType === state.battleBoard.boardType);

  return Object.assign({}, state, {
    cursorCoordinate,
    enemiesInBattle,
    unitsOnSquares,
    squareBasedAnimations,
  });
})(BattleBoard);


module.exports = BattleBoard;

Set destination of animation from `effect` state