import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {NgForm} from '@angular/forms';
import {Squad} from '../../../models/model-interfaces';
import {SquadService} from '../../../services/army-management/squad.service';
import {Subscription} from 'rxjs/Subscription';
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: './edit-squad.component.html',
  styleUrls: ['./edit-squad.component.scss']
})
export class EditSquadComponent implements OnInit, OnDestroy {

  subscription: Subscription;

  squad: Squad = {name: '', fraction: '', sortingNumber: 0};

  fileList: FileList;

  saved = false;

  showImageError = false;

  imagePreviewSrc;

  @ViewChild(NgForm) form: NgForm;

  readonly fraction = Fraction;

  constructor(private route: ActivatedRoute,
              private router: Router,
              private squadService: SquadService,
              private snackBarService: SnackBarService,
              private translate: TranslateService) {
  }

  ngOnInit() {
    this.subscription = this.route.params
                            .map(params => params['id'])
                            .filter(id => id !== undefined)
                            .flatMap(id => this.squadService.getSquad(id))
                            .subscribe(squad => {
                              this.squad = squad;
                              this.imagePreviewSrc = 'resource/squad/' + this.squad._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;
    }
  }

  saveSquad(fileInput) {
    let file: File;
    if (!this.squad._id) {
      if (this.fileList) {
        file = this.fileList[0];
        this.squadService.submitSquad(this.squad, file)
            .subscribe(squad => {
              this.saved = true;
              this.router.navigate(['..'], {relativeTo: this.route});
            });
      } else {
        this.translate.get('squad.submit.field.logo').subscribe((fieldNameLogo) => {
          this.translate.get('public.error.message.required',
            {fieldName: fieldNameLogo}).subscribe((message) => {
            this.snackBarService.showError(message, 4000);
          })
        });
      }
    } else {
      if (this.fileList) {
        file = this.fileList[0];
      }
      delete this.squad['__v'];
      this.squadService.submitSquad(this.squad, file)
          .subscribe(squad => {
            setTimeout(() => {
              this.imagePreviewSrc = 'resource/squad/' + this.squad._id + '.png?' + Date.now();
            }, 300);
            fileInput.value = '';
            this.snackBarService.showSuccess('generic.save.success');
          }, error => {
            const errorMsg = error._body ? JSON.parse(error._body).error.message : error.error.error.message;
            this.snackBarService.showError('Error: '.concat(errorMsg), 15000);
          });
    }
  }

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