import {Component, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {NgForm} from '@angular/forms';
import {WarService} from '../../../services/logs/war.service';
import {War} from '../../../models/model-interfaces';
import {CampaignService} from '../../../services/logs/campaign.service';
import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service';
import {SpinnerService} from '../../../services/user-interface/spinner/spinner.service';
import {Subscription} from 'rxjs';
import {Fraction} from '../../../utils/fraction.enum';
import {TranslateService} from '@ngx-translate/core';
import {FractionHelpers} from '../../../utils/global.helpers';


@Component({
  selector: 'war-submit',
  templateUrl: './war-submit.component.html',
  styleUrls: ['./war-submit.component.scss']
})
export class WarSubmitComponent {

  war: War = {players: []};

  subscription: Subscription;

  fileList: FileList;

  readonly validExtensions = ['.rpt', '.log', '.txt'];

  readonly fraction = Fraction;

  readonly fractionHelpers = FractionHelpers;

  showFileError = false;

  loading = false;

  @ViewChild(NgForm) form: NgForm;

  constructor(private route: ActivatedRoute,
              private router: Router,
              private warService: WarService,
              private snackBarService: SnackBarService,
              private spinnerService: SpinnerService,
              private translate: TranslateService,
              public campaignService: CampaignService) {
    this.subscription = this.route.params
                            .map(params => params['id'])
                            .filter(id => id !== undefined)
                            .flatMap(id => this.warService.getWar(id))
                            .subscribe(war => {
                              this.war = war;
                            });
  }

  fileChange(event) {
    if (this.validExtensions.filter(ext => event.target.files[0] &&
      event.target.files[0].name.endsWith(ext)).length === 1) {
      this.showFileError = false;
      this.fileList = event.target.files;
    } else {
      this.showFileError = true;
      this.fileList = undefined;
    }
  }

  submitWar() {
    if (this.war._id) {
      this.warService.updateWar(this.war).subscribe((updatedWar) => {
          this.router.navigate(['../../war/' + updatedWar._id], {relativeTo: this.route});
        },
        (error) => {
          const errorMsg = JSON.parse(error._body).error.message;
          this.snackBarService.showError('Error: '.concat(errorMsg), 15000);
        }
      );
    } else {
      if (!this.fileList) {
        this.translate.get('stats.war.submit.logfile').subscribe((fieldNameLogfile) => {
          this.translate.get('public.error.message.required',
            {fieldName: fieldNameLogfile}).subscribe((message) => {
            this.snackBarService.showError(message, 4000);
          })
        })
      }
      const file: File = this.fileList[0];
      this.loading = true;
      this.spinnerService.activate();
      this.warService.submitWar(this.war, file)
          .subscribe(war => {
              this.router.navigate(['../war/' + war._id], {relativeTo: this.route});
            },
            error => {
              this.spinnerService.deactivate();
              this.loading = false;
              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(['..'], {relativeTo: this.route});
    return false;
  }
}