import React, {Component} from 'react';
import { translate } from 'react-i18next';
import PropTypes from 'prop-types';
import { Progress } from 'react-sweet-progress';
import CloseBtn from '../../components/CloseBtn';
import PlayersCount from '../../components/PlayersCount';
import QuestionAt from '../../components/QuestionAt';
import "react-sweet-progress/lib/style.css";
import {calcPercent, getCurrentUser} from "../../utils/helper";

let timer;

class WrongAnsweredPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      countdown: props.countdown,
      isUsedFeebies: false,
      questionIndex: props.questionIndex,
      buttonStatus: 'default',
    }
  }

  componentDidMount() {
    const __this = this;

    let interval = 1000 * this.props.countdown / (this.props.countdown + 1);

    timer = window.setInterval(function () {
      __this.timerAction();
    }, interval)
  }

  timerAction() {
    if (this.state.countdown > 0) {
      const countdown = this.state.countdown - 1;
      this.setState({countdown})
    } else {
      this.props.goToVideo();
      clearInterval(timer);
    }
  }

  componentWillUnmount() {
    clearInterval(timer);
  }

  static getDerivedStateFromProps (nextProps, prevState) {
    if(prevState.questionIndex !== nextProps.questionIndex) {
      return {
        countdown: nextProps.countdown,
        isUsedFeebies: false,
        questionIndex: nextProps.questionIndex
      }
    }
    return null;
  }

  useFreebies = () => {
    const currentUser = getCurrentUser();
    if(this.state.isUsedFeebies || currentUser.freebie < 1) return;

    this.setState({isUsedFeebies: true, buttonStatus: 'clicked'});

    const buttonDiv = document.getElementsByClassName("react-sweet-progress-circle-outer")[0];
    const buttonTxtDiv = document.getElementsByClassName("life-btn--text")[0]
    buttonDiv.style.backgroundColor = "rgb(73, 152, 0)";
    buttonTxtDiv.style.color = 'black';

    this.props.useFreebies();

  };

  render() {

    const percent = calcPercent(this.props.countdown, this.state.countdown);
    const { t } = this.props;
    const { buttonStatus } = this.state;
    const currentUser = getCurrentUser();

    const useFreebieVisible = this.props.questionIndex !== this.props.questionCount &&
      ( currentUser.freebie > 0 ||  (this.state.isUsedFeebies && currentUser.freebie === 0)) ;

    return (
      <div className="wronganswered main-wrap">
        <header className="header">
          <div className="container">
            <PlayersCount count={this.props.playersCount}/>
            <CloseBtn/>
          </div>
        </header>

        <div className="content">
          <div className="container">
            <div className="eliminated">
              <div className="main-title line-red"><span>Eliminated</span></div>

              <div className="level-reached">
                <div className="level-reached--title">Level reached</div>
                <QuestionAt
                  cls="positioin-left"
                  questionCount={this.props.questionCount}
                  questionIndex={this.props.questionIndex}
                />
              </div>

              <div className="level-reached">
                <div className="level-reached--title">Total Lives</div>
                <div>
                  <div className="questions-counter positioin-left" style={{ display: 'inline-block' }}>
                    <img className="life-btn--img" src="/assets/images/icons/heart-icon.png" alt="life" title="life" />&nbsp;<span>{currentUser.freebie}</span>
                  </div>
                  { buttonStatus === 'clicked' &&
                  <div className="questions-counter positioin-right" style={{display: 'inline-block', float: 'right' }}>
                    <span style={{color: 'red'}}>-1</span>
                  </div>
                  }
                </div>
              </div>

              { useFreebieVisible ?
                <a className="life-btn" onClick={this.useFreebies}>
                  <div className="circle-countdown-wrap" style={{textAlign: 'center'}}>
                    <Progress
                      type="circle"
                      percent={percent}
                      status="default"
                      theme={{
                        default: {
                          symbol: '',
                          color: 'rgb(95, 235, 14)',
                          trailColor: 'rgb(24, 51, 1)',
                        }
                      }}
                      width={100}
                      strokeWidth={6}
                      className="countdown-circle"
                    />

                    <div className="progressbar-text">
                      <div className="life-btn--content">
                        <img className="life-btn--img" src="/assets/images/icons/heart-icon.png" alt="life" title="life" />
                        <div className="life-btn--text">Use extra life?</div>
                      </div>
                    </div>
                  </div>
                </a> : <div className="freebie-empty"/>
              }


              { this.props.questionIndex !== this.props.questionCount &&
              <div className="base-btn-wrap">
                <a title="" className="base-btn btn-white" onClick={this.props.continueWatching}>{t('continue watching')}</a>
              </div>
              }
            </div>
          </div>
        </div>

        <div className="fullscreen-bg mobile"><img src="/assets/images/backgrounds/black-background.jpg" alt="background"/></div>
      </div>
    )
  }
}


WrongAnsweredPage.propTypes = {
  useFreebies: PropTypes.func,
  continueWatching: PropTypes.func,
  playersCount: PropTypes.number,
  questionCount: PropTypes.number,
  questionIndex: PropTypes.number,
  countdown: PropTypes.number,
  goToVideo: PropTypes.func
};

export default translate("translations")(WrongAnsweredPage)