import React from 'react';
import { CountdownCircleTimer } from 'react-countdown-circle-timer';
import { number, string, bool } from 'prop-types';

const renderTime = ({ remainingTime }) => {
  if (remainingTime === 0) {
    return <div className="timer">Too late...</div>;
  }

  return (
    <div className="timer">
      <div className="text">Remaining</div>
      <div className="value">{remainingTime}</div>
      <div className="text">seconds</div>
    </div>
  );
};

const TurnTimer = ({ isTurn, currentPlayer, duration }) => {
  return (
    <div>
      <div className="timer-wrapper">
        <CountdownCircleTimer
          isPlaying={isTurn}
          duration={duration / 1000}
          colors={[['#2193b0', 0.5], ['#FFE000', 0.33], ['#A30000']]}
          size={160}
          strokeWidth={16}
          onComplete={() => [false, 1000]}
        >
          {renderTime}
        </CountdownCircleTimer>
      </div>
      <br />
      <h3>{`Current Chance: ${currentPlayer}`}</h3>
    </div>
  );
};

renderTime.propTypes = {
  remainingTime: number.isRequired
};

TurnTimer.propTypes = {
  isTurn: bool.isRequired,
  currentPlayer: string.isRequired,
  duration: number.isRequired
};

export default TurnTimer;