import { Component, OnInit } from "@angular/core";
import { formatDate } from '@angular/common';
import { DateAdapter, MAT_DATE_FORMATS, NativeDateAdapter } from "@angular/material/core";
import { TranslateService } from '@ngx-translate/core';

import { TunnelResp } from "../../models/tunnel";

import { DateService } from '../../services/date.service';
import { TunnelService } from '../../services/tunnel.service';
import { ServiceComm } from '../../services/service-comm.service';
import { StatsService } from '../../services/stats.service';
import { TunnelFlightService } from "../../services/tunnel-flight.service";

export const PICK_FORMATS = {
  parse: { dateInput: 'yy MM dd' },
  display: {
    dateInput: 'yyyy-MM-dd',
    monthYearLabel: 'yyyy MMM',
    dateA11yLabel: 'yyyy MM dd',
    monthYearA11yLabel: 'yyyy MMMM',
  }
};
class PickDateAdapter extends NativeDateAdapter {
  format(date: Date, displayFormat: Object): string {
    return formatDate(date, displayFormat.toString(), "en");
  }
}

@Component({
  selector: 'app-new-tunnel-flight',
  templateUrl: './new-tunnel-flight.component.html',
  styleUrls: ['./new-tunnel-flight.component.css'],
  providers: [
    { provide: DateAdapter, useClass: PickDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS }
  ]
})
export class NewTunnelFlightComponent implements OnInit {
  public flightDate: Date;
  public minutesOfFlight: number;
  public selectedTunnel: TunnelResp;
  public listOfTunnel: Array<TunnelResp>;
  public listOfFilteredTunnel: Array<TunnelResp>;
  public resetForm: boolean;
  public comments: string;
  private countDatasLoaded: number;
  private pendingAddRequest: boolean;

  constructor(private serviceComm: ServiceComm,
              private serviceTunnel: TunnelService,
              private serviceTunnelFlight: TunnelFlightService,
              private translateService: TranslateService,
              private statsService: StatsService) { }

  ngOnInit() {
    this.serviceComm.forceTranslateTitle.subscribe((data) => {
      if (data === true) {
        this.updateTitle();
      }
    });
    this.updateTitle();

    this.pendingAddRequest = false;
    this.initForm();
    this.getListOfTunnels();
  }

  public onFormSubmit() {
    this.pendingAddRequest = true;

    this.serviceTunnelFlight.addFlight(this.selectedTunnel.id,
                                       this.flightDate,
                                       this.minutesOfFlight,
                                       this.comments)
                            .subscribe(() => {
                              this.statsService.resetStats();
                              this.comments = undefined;

                              if (this.resetForm === true) {
                                this.initForm();
                              }
                              this.pendingAddRequest = false;
                            });
  }

  public isValidatedForm(): boolean {
    return (this.selectedTunnel !== undefined &&
            this.selectedTunnel.id !== undefined &&
            this.minutesOfFlight !== undefined &&
            typeof this.minutesOfFlight === "number");
  }

  private getListOfTunnels() {
    this.serviceTunnel.getListOfTunnels().subscribe((data) => {
      data.sort((a, b) => a.name.localeCompare(b.name));
      this.listOfTunnel = data;
      this.listOfFilteredTunnel = data;
      this.countDatasLoaded++;
    });
  }

  public notLoadingToDisplay(): boolean {
    // return !(this.pendingAddRequest || this.countDatasLoaded > 1);
    return true;
  }

  private updateTitle() {
    this.translateService.get("NewTunnelFlight_Title").subscribe(
      data => { this.serviceComm.UpdatedComponentTitle(data); }
    );
  }

  private initForm() {
    this.flightDate = new Date();
    this.flightDate.setHours(0, 0, 0, 0);

    this.minutesOfFlight = 1;
    this.selectedTunnel = undefined;
    this.comments = undefined;
  }

  public resetTunnel() {
    this.selectedTunnel = undefined;
    this.onChangeTunnel('');
  }

  public onChangeTunnel(event: any) {
    let filterValue: string;

    if (event.id === undefined) {
      filterValue = event.toLowerCase();

      this.listOfFilteredTunnel = this.listOfTunnel;
      this.listOfFilteredTunnel = this.listOfFilteredTunnel.filter((option) =>
        option.name.toLowerCase().includes(filterValue)
      );
    }
  }

  public displayNameFn(data?: any): string | undefined {
    return data ? data.name : undefined;
  }
}