import {Component, ViewChild} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {NgForm} from "@angular/forms";
import * as model from "../../models/model-interfaces";
import {Decoration} from "../../models/model-interfaces";
import {DecorationService} from "../../services/decoration-service/decoration.service";

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

  decoration: Decoration = {name: '', fraction: '', sortingNumber: 0};

  fileList: FileList;

  saved = false;

  showImageError = false;

  @ViewChild(NgForm) form: NgForm;

  constructor(private route: ActivatedRoute,
              private router: Router,
              private decorationService: DecorationService) {
  }

  ngOnInit() {

  }

  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;
    }
  }

  saveDecoration() {
    if (this.fileList) {
      let file: File = this.fileList[0];
      this.decorationService.submitDecoration(this.decoration, file)
        .subscribe(decoration => {
          this.saved = true;
          this.router.navigate(['../overview', decoration._id], {relativeTo: this.route});
        })
    } else {
      return window.alert(`Bild ist ein Pflichtfeld`);
    }
  }

  cancel() {
    //this.location.back();
    this.router.navigate(['/cc-decorations']);
    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?`);
  }

}