import React, {Component} from 'react';
import { translate } from 'react-i18next';
import PropTypes from 'prop-types';
import { Progress } from 'react-sweet-progress';
import WellDonePage from '../WellDonePage/index'
import WrongAnsweredPage from '../WrongAnsweredPage/index'
import QuestionVideoPage from '../QuestionVideoPage/index'
import config from '../../config'
import {QUESTION_CLOSE, QUESTION_ONLINE} from "../../containers/Home/constants"
import PlayersCount from "../../components/PlayersCount/index";
import QuestionAt from '../../components/QuestionAt'
import QuestionSpectating from '../../components/QuestionSpectating';
import Result from '../../components/Result';
import "react-sweet-progress/lib/style.css";
import {calcPercent, calcPercentOfOption, getCurrentTimestamp} from '../../utils/helper';
import {QUESTION_SHOW, QUESTION_RESULT, QUESTION_SPECTATING, QUESTION_VIDEO, QUESTION_WAIT} from "./constants";
import {RESULT_CORRECT, RESULT_DEFAULT, RESULT_INCORRECT} from "../../components/Result/constants";
import QuestionTieBreakPage from '../QuestionTieBreakPage';
import {TIEBREAK} from '../QuestionTieBreakPage/constants';

let timer;
let countDownTimer;

const getQuestionTimes = (question) => {
  let tQuestionOnline = getCurrentTimestamp();
  let tQuestionShow = 0;
  let tQuestionResults = 0;
  let tQuestionNext = 0;
  let tQuestionEnd = 0;

  if (question.status === QUESTION_ONLINE) {
    tQuestionShow = tQuestionOnline + question.countup * 1000;
    tQuestionResults = tQuestionShow + question.countdown * 1000;
    tQuestionNext = tQuestionResults + config.showResultSeconds * 1000;
    tQuestionEnd = tQuestionNext + config.waitNextQuestionCountdown * 1000;
  }

  return {
    tQuestionOnline, tQuestionShow, tQuestionResults, tQuestionNext, tQuestionEnd
  }
};

class QuestionPage extends Component {

  constructor(props) {
    super(props);

    const { question, isSpectating } = props;

    let tQuestions = getQuestionTimes(question);
    console.log("loaded question first. question status: ", question.status);
    console.log("calculate question times: ", tQuestions);

    this.state = {
      ...tQuestions,
      questionStatus: question.status,
      questionText: question.text,
      questionCountDown: question.countdown,
      questionUuid: question.uuid,
      questionAnswers: question.answers || [],
      questionPicture: question.picture,
      countdown: question.countdown,
      selectedAnswer: -1,
      isCorrect: 2,
      isAnswered: false,
      isQuestionFailed: false,
      showedResult: false,
      countup: 0,
      isSpectating,
      currentPage: isSpectating ? QUESTION_SPECTATING : QUESTION_VIDEO,
      isUsedFeebies: false,
      isFirstQuestion: true,
      isPresented: false,
    }
  }

  static getDerivedStateFromProps (nextProps, prevState) {

    const { question } = nextProps;

    if (prevState.questionStatus === QUESTION_CLOSE && question.status === QUESTION_ONLINE ) {
      let tQuestions = getQuestionTimes(question);

      console.log("calculate question times: ", tQuestions);
      console.log('time: ', getCurrentTimestamp() ,'currentPage: ', QUESTION_VIDEO);

      return {
        ...tQuestions,
        questionText: question.text,
        questionPicture: question.picture,
        questionCountDown: question.countdown,
        questionUuid: question.uuid,
        questionStatus: question.status,
        questionAnswers: question.answers,
        currentPage: QUESTION_VIDEO,
        countdown: question.countdown, // question countdown.
        countup: 0,  // Video play countup.
        selectedAnswer: -1,
        isAnswered: false,
        isCorrect: 2,
        showedResult: false,
        isSpectating: prevState.isSpectating || !prevState.isCorrect || nextProps.isSpectating,
        isUsedFeebies: false,
        isFirstQuestion: false
      }
    } else {
      return {
        questionStatus: question.status,
      }
    }
  }



  componentDidMount() {
    const __this = this;

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

  logTimeAndPage = (currentPage) => {
    console.log('time: ', getCurrentTimestamp() ,'currentPage: ', currentPage);
  };

  timerAction() {
    const __this = this;
    let currentTime = getCurrentTimestamp();

    const { tQuestionShow, tQuestionResults, tQuestionNext, tQuestionEnd  } = this.state;

    if (this.state.currentPage !== QUESTION_SPECTATING) {

      if (currentTime <= tQuestionShow) {

        if (this.props.question.i === 1 && !this.state.isPresented) {

          console.log('time: ', getCurrentTimestamp() ,'currentPage: ', QUESTION_VIDEO);

          __this.props.setOscPresence();

          this.setState({currentPage: QUESTION_VIDEO, isPresented: true});

        } else if (this.state.currentPage !== QUESTION_VIDEO) {

          this.setState({currentPage: QUESTION_VIDEO});
        }

      } else if (currentTime > tQuestionShow && currentTime <= tQuestionResults) {


        if (this.state.currentPage !== QUESTION_SHOW) {

          this.logTimeAndPage(QUESTION_SHOW);

          this.setState({currentPage: QUESTION_SHOW});

          let interval = 1000 * this.state.questionCountDown / (this.state.questionCountDown + 1);

          countDownTimer = window.setInterval(function () {

            if (__this.state.countdown > 0) {

              const countdown = __this.state.countdown - 1;
              __this.setState({countdown})

            }

          }, interval);
        }

      } else if (currentTime > tQuestionResults && currentTime <= tQuestionNext) {

        if (this.state.currentPage !== QUESTION_RESULT && this.props.question.correct !== undefined ) {

          this.logTimeAndPage(QUESTION_RESULT);

          clearInterval(countDownTimer);

          this.setState({
            currentPage: QUESTION_RESULT,
            isAnswered: true,
            isCorrect: parseInt(this.state.selectedAnswer, 10) === this.props.question.correct ? 1 : 0
          });
        } else {
          this.setState({
            isAnswered: true
          })
        }

      } else if (currentTime > tQuestionNext && currentTime <= tQuestionEnd) {

        if (this.state.currentPage !== QUESTION_WAIT && this.props.question.nQ !== this.props.question.i) {

          if (this.state.isCorrect === 0) {
            this.setState({isQuestionFailed: true});
          }

          this.logTimeAndPage(QUESTION_WAIT);
          this.setState({currentPage: QUESTION_WAIT});
        }
      }
    }
  }

  componentWillUnmount() {
    clearInterval(timer);
    clearInterval(countDownTimer);
  }

  goToVideo = () => {
    this.setState({currentPage: QUESTION_VIDEO});
  };

  clickAnswer = (answer) => {

    if (this.state.isAnswered || this.state.isQuestionFailed || this.state.isSpectating) return;

    this.props.selectAnswer(answer, this.state.questionUuid);

    this.setState({
      selectedAnswer: answer,
      isAnswered: true,
    });
  };

  useFreebies = () => {
    this.setState({isQuestionFailed: false, isCorrect: true, isUsedFreebies: true});
    this.props.useFreebies();
  };

  continueWatching = () => {
    console.log('continue watching');
  };

  startSpectating = () => {
    this.setState({isSpectating: true});
  };

  render() {
    const { question, playersCount, t } = this.props;
    const { countdown, selectedAnswer, questionAnswers, isCorrect, isSpectating, currentPage, questionPicture, questionCountDown, questionText, isUsedFeebies, isFirstQuestion } = this.state;

    if( question.type === TIEBREAK )
      return <QuestionTieBreakPage
        question={question}
        isSpectating={false}
        />

    if (isSpectating && isFirstQuestion) {
      return <QuestionSpectating
        playersCount={playersCount}
        survivors={question.survivors}
      />
    }

    if(currentPage === QUESTION_VIDEO) {

      return <QuestionVideoPage
              questionCount={question.nQ}
              questionIndex={question.i}
              playersCount={playersCount}/>

    }

    if(currentPage === QUESTION_WAIT) {

      if ( isSpectating ) {

        return <QuestionSpectating
          playersCount={playersCount}
          survivors={question.survivors}
        />

      } else {

        if (isCorrect === 1 && !isUsedFeebies){

          return <WellDonePage
            countdown={config.waitNextQuestionCountdown}
            survivors={question.survivors}
            goToVideo={this.goToVideo}
          />

        } else {

          return <WrongAnsweredPage
            useFreebies={this.useFreebies}
            continueWatching={this.continueWatching}
            questionIndex={this.props.question.i}
            questionCount={question.nQ}
            playersCount={this.props.question.survivors}
            countdown={config.waitNextQuestionCountdown}
            goToVideo={this.goToVideo}
          />

        }
      }
    }

    const percent = calcPercent(questionCountDown, this.state.countdown);

    return (<div className="main-wrap">
        <header className="header header-with-bg header-progress-bar">
          <div className="container">

            <PlayersCount count={playersCount}/>

            { !isSpectating && currentPage === QUESTION_RESULT &&
            <div className="answer-label">
              {isCorrect === 1 ?
                <div className="answer-label--message correct">{t('correct')}</div> :
                isCorrect === 0 ? <div className="answer-label--message incorrect">{t('incorrect')}</div> : null }
            </div>
            }

            { isSpectating &&
              <div className="answer-label">
                <div className="answer-label--message spectating">{t('spectating')}</div>
              </div>
            }
          </div>

          <Progress
            status="default"
            percent={percent}
            theme={{
              default: {
                symbol: '‍',
                color: 'rgb(204, 204, 204)'
              }
            }}
            className="countdown-line"
          />

          <div className="background mobile"><img src={questionPicture} alt="" title=""/></div>
        </header>

        <div className="content">
          <div className="container">
            <div className="question">
              <div className="question--header">
                <div className="row">
                  <div className="col-8">
                    <div className="question--title">{ questionText }</div>
                  </div>
                  <div className="col-4">
                    {currentPage === QUESTION_SHOW &&
                    <div className="circle-countdown-wrap">
                      <Progress
                        type="circle"
                        percent={percent}
                        status={ countdown === 0 ? 'zero' : 'default' }
                        theme={{
                          default: {
                            symbol: countdown,
                            color: 'rgb(95, 235, 14)',
                            trailColor: 'rgb(24, 51, 1)',
                          },
                          zero: {
                            symbol: '0',
                            color: 'rgb(95, 235, 14)',
                            trailColor: 'rgb(24, 51, 1)',
                          }
                        }}
                        width={53}
                        strokeWidth={4}
                        className="countdown-circle"
                      />
                    </div>
                    }

                    { currentPage === QUESTION_RESULT &&
                    <QuestionAt
                      cls="position-right"
                      questionCount={question.nQ}
                      questionIndex={this.props.question.i}/>
                    }
                  </div>
                </div>
              </div>
              <div className="question--content">

                { currentPage === QUESTION_SHOW ? <ul className="question--answers">
                  { questionAnswers.map((item, index) => {

                    let cls = "";
                    if (index === selectedAnswer) {
                      cls = "selected"
                    }

                    return <li key={index}>
                      <a className={cls} onClick={() => {this.clickAnswer(index)}}>{item}</a>
                    </li>
                  })
                  }
                </ul> : <ul className="question--answers question--answers-results">
                  { questionAnswers.map((item, index) => {

                    let type = RESULT_DEFAULT;

                    // Calculate percent.
                    const percent = calcPercentOfOption(this.props.question.nAnswers, index);

                    if (index === selectedAnswer) {
                      type = RESULT_INCORRECT
                    }

                    if (index === question.correct) {
                      type = RESULT_CORRECT
                    }

                    return (<li key={index}>
                      <Result type={type} percent={percent} content={item} />
                    </li>)
                  })
                  }
                </ul>

                }
              </div>
            </div>
          </div>
        </div>

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

QuestionPage.propTypes = {
  question: PropTypes.object,
  isSpectating: PropTypes.bool,
  playersCount: PropTypes.number,
  useFreebies: PropTypes.func,
  selectAnswer: PropTypes.func,
  setOscPresence: PropTypes.func
};

export default translate('translations')(QuestionPage)