import {Component, ViewChild} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {NgForm} from "@angular/forms";
import {Rank} from "../../models/model-interfaces";
import {RankService} from "../../services/rank-service/rank.service";
import {Subscription} from "rxjs/Subscription";


@Component({
  templateUrl: './edit-rank.component.html',
  styleUrls: ['./edit-rank.component.css', '../../style/entry-form.css']
})
export class EditRankComponent {

  subscription: Subscription;

  rank: Rank = {name: '', fraction: '', level: 0};

  fileList: FileList;

  saved = false;

  showImageError = false;

  imagePreviewSrc;

  showSuccessLabel = false;

  @ViewChild(NgForm) form: NgForm;

  constructor(private route: ActivatedRoute,
              private router: Router,
              private rankService : RankService) {
  }

  ngOnInit() {
    this.subscription = this.route.params
      .map(params => params['id'])
      .filter(id => id != undefined)
      .flatMap(id => this.rankService.getRank(id))
      .subscribe(rank => {
        this.rank = rank;
        this.imagePreviewSrc = 'resource/rank/' + this.rank._id + '.png?' + Date.now();
      });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  fileChange(event) {
    if (!event.target.files[0].name.endsWith('.png')) {
      this.showImageError = true;
      this.fileList = undefined;
    } else {
      this.showImageError = false;
      this.fileList = event.target.files;
    }
  }

  saveRank(fileInput) {
    let file: File;
    if (!this.rank._id) {
      if (this.fileList) {
        file = this.fileList[0];
        this.rankService.submitRank(this.rank, file)
          .subscribe(rank => {
            this.saved = true;
            this.router.navigate(['..'], {relativeTo: this.route});
          })
      } else {
        return window.alert(`Bild ist ein Pflichtfeld`);
      }
    } else {
      if (this.fileList) {
        file = this.fileList[0];
      }
      delete this.rank['__v'];
      this.rankService.submitRank(this.rank, file)
        .subscribe(rank => {
          setTimeout(() => {
            this.imagePreviewSrc = 'resource/rank/' + this.rank._id + '.png?' + Date.now();
          }, 300);
          fileInput.value = '';
          this.showSuccessLabel = true;
          setTimeout(() => {
            this.showSuccessLabel = false;
          }, 2000)
        })
    }
  }

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

  canDeactivate(): boolean {
    if (this.saved || !this.form.dirty) {
      return true;
    }
    return window.confirm(`Ihr Formular besitzt ungespeicherte Änderungen, möchten Sie die Seite wirklich verlassen?`);
  }

}