import { Component, OnInit, Input, Output, EventEmitter, OnChanges, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { TestsService } from '../../../tests.service';
import * as $ from 'jquery';
import { ISubscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-puzzle',
  templateUrl: './puzzle.component.html',
  styleUrls: ['./puzzle.component.css']
})
export class PuzzleComponent implements OnInit, OnChanges, OnDestroy {
  private _question;
  @Output() emitNextQuestionRequest = new EventEmitter();
  private id;
  private verifyAnswerSubscription: ISubscription;
  puzzles = [];
  puzzlesToSend = [];
  private selectedPuzzle = { indexOfPuzzle: Number, puzzleText: String, from: '' };
  interval: any;
  public timeLeft = 0;

  constructor(private route: ActivatedRoute, private testsService: TestsService) { }

  nextQuestion(f = null) {
    this.id = this.route.snapshot.params.id;
    const body = { id: this.question.id, type: 'puzzle', answers: [{ id: this.question.answers[0].id, puzzles: this.puzzlesToSend }] };
    this.verifyAnswerSubscription = this.testsService.verifyAnswer(this.id, body).subscribe(d => {
      $('.answers').find('[type="text"]').prop('value', '');
      this.emitNextQuestionRequest.emit(d);
    });
  }

  startTimer() {
    this.interval = setInterval(() => {
      if (this.timeLeft > 0) {
        this.timeLeft--;
      } else {
        this.nextQuestion();
      }
    }, 1000);
  }

  puzzleClick(item, i) {
    if (item !== '' && item !== undefined) {
      if (this.selectedPuzzle.from === 'puzzles') {
        this.selectedPuzzle = { indexOfPuzzle: undefined, puzzleText: undefined, from: undefined };
      } else {
        this.selectedPuzzle = { indexOfPuzzle: i, puzzleText: item, from: 'puzzles' };
      }
    }
  }

  puzzleToSendClick(item, i) {
    if (this.selectedPuzzle.from === 'puzzles') {
      const helper = this.puzzlesToSend[i];
      this.puzzlesToSend[i] = this.selectedPuzzle.puzzleText;
      this.puzzles[Number(this.selectedPuzzle.indexOfPuzzle)] = helper;
      this.selectedPuzzle = { indexOfPuzzle: undefined, puzzleText: undefined, from: undefined };
    } else if (this.selectedPuzzle.from === 'puzzlesToSend') {
      const helper = this.puzzlesToSend[i];
      this.puzzlesToSend[i] = this.selectedPuzzle.puzzleText;
      this.puzzlesToSend[Number(this.selectedPuzzle.indexOfPuzzle)] = helper;
      this.selectedPuzzle = { indexOfPuzzle: undefined, puzzleText: undefined, from: undefined };
    } else if (item !== '' && item !== undefined) {
      this.selectedPuzzle = { indexOfPuzzle: i, puzzleText: item, from: 'puzzlesToSend' };
    }
  }

  prepareLists() {
    this.selectedPuzzle = { indexOfPuzzle: undefined, puzzleText: undefined, from: undefined };
    this.puzzles = [];
    this.puzzlesToSend = [];
    this.puzzles = JSON.parse(JSON.stringify(this.question.answers[0].puzzles));
    this.puzzles.forEach(element => {
      this.puzzlesToSend.push('');
    });
  }

  public get question() {
    return this._question;
  }

  @Input('question')
  public set question(data) {
    this._question = data;
    this.ngOnDestroy();
    this.timeLeft = this.question.time;
    this.prepareLists();
    if (this.timeLeft > 0) {
      this.startTimer();
    }
  }

  ngOnInit() {}

  ngOnChanges() {
    this.prepareLists();
  }

  ngOnDestroy() {
    if (this.interval) {
      clearInterval(this.interval);
    }
    if (this.verifyAnswerSubscription) {
      this.verifyAnswerSubscription.unsubscribe();
    }
  }

}
