import {Component, ViewChild} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {Award, Decoration, User} from "../../models/model-interfaces";
import {NgForm} from "@angular/forms";
import {AwardingService} from "../../services/awarding-service/awarding.service";
import {DecorationService} from "../../services/decoration-service/decoration.service";
import {UserService} from "../../services/user-service/user.service";


@Component({
  templateUrl: './req-award.component.html',
  styleUrls: ['./req-award.component.css'],
})
export class RequestAwardComponent {

  @ViewChild(NgForm) form: NgForm;

  showForm = false;

  showSuccessLabel = false;

  user: User = {};

  decoration: Decoration = null;

  reason: string = '';

  decorations: Decoration[];

  awards: Award[];

  users: User[];

  decoPreviewDisplay = 'none';

  constructor(private router: Router,
              private route: ActivatedRoute,
              private userService: UserService,
              private awardingService: AwardingService,
              private decorationService: DecorationService) {
  }

  ngOnInit() {
    let currentUser = JSON.parse(localStorage.getItem('currentUser'));
    // show only current users squad members
    this.userService.findUsers('', undefined, currentUser.squad._id).subscribe(users => {
      this.users = users;
    });
  }

  toggleUser(previewImage, decoDescription) {
    this.decoration = null;
    if (previewImage && decoDescription) {
      previewImage.src = decoDescription.innerHTML = '';
    }
    this.decorationService.findDecorations('', this.user.squad.fraction).subscribe(decorations => {
      this.decorations = decorations;
    });

    this.awardingService.getUserAwardings(this.user._id).subscribe(awards => {
      this.awards = awards;
    });

    this.showForm = true;
  }


  toggleDecoPreview(descriptionField, image) {
    this.decoPreviewDisplay = 'flex'; // visible & keep same height for all children

    const description = this.decorations.find(
      decoration => decoration._id === this.decoration._id
    ).description;

    image.src = 'resource/decoration/' + this.decoration._id + '.png';
    descriptionField.innerHTML = description;

  }

  addAwarding(previewImage, descriptionField) {
    if (this.decoration._id && this.reason.length > 0) {
      const award : Award = {
        "userId": this.user._id,
        "decorationId": this.decoration._id,
        "reason": this.reason,
        "date": Date.now()
      };
      this.awardingService.requestAwarding(award).subscribe(() => {
        this.awardingService.getUserAwardings(this.user._id)
          .subscribe(awards => {
            this.awards = awards;
            this.decoration = null;
            this.reason = previewImage.src = descriptionField.innerHTML = '';
            this.decoPreviewDisplay = 'none';
            this.showSuccessLabel = true;
            setTimeout(() => {
              this.showSuccessLabel = false;
            }, 2000)
          })
      })
    }
  }

  cancel() {
    this.router.navigate(['..'], {relativeTo: this.route});
    return false;
  }

  /**
   * compare ngValue with ngModel to assign selected element
   */
  equals(o1: User, o2: User) {
    if (o1 && o2) {
      return o1._id === o2._id;
    }
  }

}