import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Award, Decoration} from '../../../models/model-interfaces';
import {NgForm} from '@angular/forms';
import {AwardingService} from '../../../services/army-management/awarding.service';
import {DecorationService} from '../../../services/army-management/decoration.service';
import {Fraction} from '../../../utils/fraction.enum';
import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service';
import {TranslateService} from '@ngx-translate/core';


@Component({
  templateUrl: './award-user.component.html',
  styleUrls: ['./award-user.component.scss'],
})
export class AwardUserComponent implements OnInit {

  @ViewChild(NgForm) form: NgForm;

  userId: string;

  decorations: Decoration[];

  awards: Award[];

  awardStatus = {};

  decoPreviewDisplay = 'none';

  readonly fraction = Fraction;

  constructor(private router: Router,
              private route: ActivatedRoute,
              private awardingService: AwardingService,
              private decorationService: DecorationService,
              private snackBarService: SnackBarService,
              private translate: TranslateService) {
  }

  ngOnInit() {
    ['users.award.table.status.in.progress',
      'users.award.table.status.approved',
      'users.award.table.status.rejected'].forEach((i18n) => {
      this.translate.get(i18n).subscribe((translated) => {
        this.awardStatus[i18n] = translated;
      })
    });

    this.decorationService.findDecorations().subscribe(decorations => {
      this.decorations = decorations;
    });

    this.route.params
        .map(params => params['id'])
        .flatMap(id => this.awardingService.getUserAwardings(id))
        .subscribe(awards => {
          this.awards = awards;
        });

    this.route.params
        .map(params => params['id'])
        .subscribe(id => this.userId = id);
  }

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

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

      image.src = 'resource/decoration/' + decorationId + '.png';
      descriptionField.innerHTML = description;
    } else {
      this.decoPreviewDisplay = 'none';
    }
  }

  addAwarding(decorationField, reasonField, previewImage, descriptionField) {
    const decorationId = decorationField.value;
    const reason = reasonField.value;
    if (decorationId && reason.length > 0) {
      const award = {
        userId: this.userId,
        decorationId: decorationId,
        reason: reason,
        date: Date.now()
      };
      this.awardingService.addAwarding(award).subscribe(() => {
        this.awardingService.getUserAwardings(this.userId)
            .subscribe(awards => {
              this.awards = awards;
              this.decoPreviewDisplay = 'none';
              decorationField.value = undefined;
              reasonField.value = previewImage.src = descriptionField.innerHTML = '';
              this.snackBarService.showSuccess('generic.save.success');
            });
      });
    }
  }

  deleteAwarding() {
    const checkedAwardings = this.awards.filter(award => award['checked'] === true);

    if (checkedAwardings.length > 0) {
      checkedAwardings.forEach(awarding => {
        this.awardingService.deleteAwarding(awarding._id).subscribe((res) => {
          this.awardingService.getUserAwardings(this.userId)
              .subscribe((awards) => {
                this.awards = awards;
              });
        });
      });
      this.snackBarService.showSuccess('generic.save.success');
    }
  }

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