import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewContainerRef } from '@angular/core';
import { MatDialog, MatStepper } from '@angular/material';
import { AuditDialogService, ColumnTemplate, ConfirmationDialogService, DynaDataService, DynaDataSource, FieldFilter, IFormView, ValidatorUtils } from '@xdf/gallery';
import { DialogFlightCostComponent } from '../dialog-flight-cost/dialog-flight-cost.component';
import { ActivatedRoute, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { InitCommonsService, NotificationService } from '@xdf/commons';
import { NavigationService } from '@xdf/layouts';
import { FormGroup } from '@angular/forms';

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: 'cost_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: 'departureDate',
    sortable: true,
    title: 'cost_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: 'cost_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
  },
  {
    name: 'amount',
    sortable: true,
    title: 'cost_price',
    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
  }
];

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

  columnTemplateArray: ColumnTemplate[];
  displayedColumns = new Array<string>();
  fieldFilters: Array<FieldFilter> = fieldFilters;
  filterTags = [];

  mode: string;

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

  @Input()
  public minDate: any;

  @Input()
  public maxDate: any;

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

  constructor(public dialog: MatDialog, public changeDetectorRef: ChangeDetectorRef, private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.columnTemplateArray = columnTemplateArray;

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

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

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

  ngAfterViewChecked(): void {
    this.changeDetectorRef.detectChanges();
  }

  foundMaxId(): number {
    let maxId = 0;
    this.costs.forEach(cost => {
      if (cost.id > maxId) {
        maxId = cost.id;
      }
    });
    return maxId;
  }

  onDelete(): void {
    console.log('onDelete');
  }

  onEdit(): void {
    console.log('onEdit');
  }

  onAdd() {
    const dialogRef = this.dialog.open(DialogFlightCostComponent, {
      width: '600px',
      data: { minDate: this.minDate, maxDate: this.maxDate }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result.status) {
          this.onAddCost.emit({...result.cost, id: this.foundMaxId() + 1});
      }
    })
  }
}
