import { AfterContentChecked, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChange, SimpleChanges } from '@angular/core';
import { MatDialog, MatTableDataSource } from '@angular/material';
import { ColumnTemplate, DynaDataSource, FieldFilter } from '@xdf/gallery';
import { DialogFlightScaleComponent } from '../dialog-flight-scale/dialog-flight-scale.component';
import { ActivatedRoute } from '@angular/router';
import { get, param } from 'jquery';

const fieldFilters = [
  new FieldFilter('agent_code', 'id', 'id', 'number', undefined),
  new FieldFilter('agent_name', 'name', 'name', 'string', undefined),
  new FieldFilter('agent_status', 'status', 'status', 'valpos', (
    { DP: 'label.deployed', PS: 'label.sync-pending' }
    ) as any),
];

const columnTemplateArray = [
  {
    name: 'id',
    sortable: false,
    title: 'scale_id',
    visible: true,
    filtable: true,
    style: { width: 'auto' },
    type: 'number',
    aliasName: null,
    queryName: null,
    responsive: null,
    styles: null,
    values: null,
    digitsInfo: null,
    dateFormat: null,
    colStyle: null
  },
  {
    name: 'airportOriginName',
    sortable: true,
    title: 'scale_airportOrigin',
    visible: true,
    filtable: true,
    style: { width: '75px' },
    type: 'string',
    aliasName: null,
    queryName: null,
    responsive: null,
    styles: null,
    values: null,
    digitsInfo: null,
    dateFormat: null,
    colStyle: null
  },
  {
    name: 'airportDestinationName',
    sortable: true,
    title: 'scale_airportDestination',
    visible: true,
    filtable: true,
    style: { width: 'auto' },
    type: 'string',
    aliasName: null,
    queryName: null,
    responsive: null,
    styles: null,
    values: null,
    digitsInfo: null,
    dateFormat: null,
    colStyle: null
  },
  {
    name: 'departureDate',
    sortable: true,
    title: 'scale_departureDate',
    visible: true,
    filtable: true,
    style: { width: 'auto' },
    type: 'string',
    aliasName: null,
    queryName: null,
    responsive: null,
    styles: null,
    values: null,
    digitsInfo: null,
    dateFormat: null,
    colStyle: null
  },
  {
    name: 'arrivalDate',
    sortable: true,
    title: 'scale_arrivalDate',
    visible: true,
    filtable: true,
    style: { width: 'auto' },
    type: 'string',
    aliasName: null,
    queryName: null,
    responsive: null,
    styles: null,
    values: null,
    digitsInfo: null,
    dateFormat: null,
    colStyle: null
  }
];

@Component({
  selector: 'byte-panel-scale-config',
  templateUrl: './panel-scale-config.component.html',
  styleUrls: ['./panel-scale-config.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PanelScaleConfigComponent implements OnInit, AfterContentChecked {

  columnTemplateArray: ColumnTemplate[] = columnTemplateArray;

  displayedColumns = new Array<string>();
  filterTags = [];

  @Input()
  public scales = [];

  @Input()
  public airports: any[] = [];

  @Output()
  public onAdd: EventEmitter<any> = new EventEmitter();

  constructor(public dialog: MatDialog, private ref: ChangeDetectorRef, private activatedRouter: ActivatedRoute) { }


  ngAfterContentChecked(): void {
    this.ref.detectChanges();
  }

  mode: string;

  ngOnInit() {

    this.activatedRouter.params.subscribe(params => {
      this.mode = params.mode;
    })

    this.columnTemplateArray.forEach(column => {
      this.displayedColumns.push(column.name);
    });

    this.displayedColumns.push('actions');
  }

  onAddScale() {
    const dialogRef = this.dialog.open(DialogFlightScaleComponent, {
      width: '600px',
      data: { id: null, airportOrigin: null, airportDestination: null, departureDate: null, arrivalDate: null, status: false, airports: this.airports }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result.status) {
        result.scale.airportOriginName = this.getAirportById(result.scale.airportOriginId);
        result.scale.airportDestinationName = this.getAirportById(result.scale.airportDestinationId);
        this.onAdd.emit({...result.scale, id: this.scales.length + 1});
      }
    })
  }

  getAirportById(id: number) {
    return this.airports.find(airport => airport.value == id).label;
  }

}
