text: import React from 'react';
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  import classnames from 'classnames';
  import { withTranslation } from 'react-i18next';
  
  import { formatMoney } from '@authenticgaming/ag.ui.core';
  
  import { getBetWinAmount, getWinningNumberState } from '~/redux/selectors';
  import phrases from '~/constants/phrases';
  
  import WinningNumber from './winningNumber';
  
  
  const neighboursWithColor = {
      36: ['red', '13', '11'],
      35: ['black', '12', '3'],
      34: ['red', '17', '6'],
      33: ['black', '16', '1'],
      32: ['red', '0', '15'],
      31: ['black', '14', '9'],
      30: ['red', '11', '8'],
      29: ['black', '18', '7'],
      28: ['black', '7', '12'],
      27: ['red', '6', '13'],
      26: ['black', '3', '0'],
      25: ['red', '2', '17'],
      24: ['black', '5', '16'],
      23: ['red', '8', '10'],
      22: ['black', '9', '18'],
      21: ['red', '4', '2'],
      20: ['black', '1', '14'],
      19: ['red', '15', '4'],
      18: ['red', '22', '29'],
      17: ['black', '25', '34'],
      16: ['red', '24', '33'],
      15: ['black', '32', '19'],
      14: ['red', '20', '31'],
      13: ['black', '27', '36'],
      12: ['red', '28', '35'],
      11: ['black', '36', '30'],
      10: ['black', '23', '5'],
      9:  ['red', '31', '22'],
      8:  ['black', '30', '23'],
      7:  ['red', '29', '28'],
      6:  ['black', '34', '27'],
      5:  ['red', '10', '24'],
      4:  ['black', '19', '21'],
      3:  ['red', '35', '26'],
      2:  ['black', '21', '25'],
      1:  ['red', '33', '20'],
      0:  ['green', '26', '32'],
  };
  
  const WinningAnimator = ({ t: translate, amount, winNumber, isBigtable }) => {
      const visible = winNumber !== '';
      const winningTextVisible = amount > 0;
  
      const winningNumberWithNeighbours = winNumber ? {
          winningNumber:       winNumber,
          color:               neighboursWithColor[winNumber][0],
          leftNeighbour:       neighboursWithColor[winNumber][1],
          leftNeighbourColor:  neighboursWithColor[neighboursWithColor[winNumber][1]][0],
          rightNeighbour:      neighboursWithColor[winNumber][2],
          rightNeighbourColor: neighboursWithColor[neighboursWithColor[winNumber][2]][0],
      } : {};
  
      const winningAnimatorClass = classnames('winningAnimator', {
          isVisible: visible,
          winningTextVisible,
      });
  
      const amountHtml = translate(phrases.youWin).replace('{amount}', formatMoney(amount * 100));
      /* eslint-disable react/no-danger */
      return (
          <div className={winningAnimatorClass}>
              {
                  !isBigtable && visible
                      && (
                          <div className='winningAnimatorContainer'>
                              <WinningNumber winningNumber={winningNumberWithNeighbours} />
                          </div>
                      )
              }
              {
                  winningTextVisible
                      && (
                          <div
                              className={classnames('winningText', { isVisible: winningTextVisible })}
                              dangerouslySetInnerHTML={{ __html: amountHtml }}
                          />
                      )
              }
          </div>
      );
      /* eslint-enable react/no-danger */
  };
  
  WinningAnimator.propTypes = {
      amount:          PropTypes.number.isRequired,
      winNumber:       PropTypes.string.isRequired,
      isBigtable:      PropTypes.bool.isRequired,
      t:               PropTypes.func.isRequired,
  };
  
  const mapStateToProps = (state) => ({
      amount:     getBetWinAmount(state),
      winNumber:  getWinningNumberState(state),
  });
  
  export default connect(mapStateToProps)(withTranslation()(WinningAnimator));
  