import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { Inject } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, FormArray, Validators, ReactiveFormsModule } from '@angular/forms';

import { GridOptions } from "ag-grid-community";

import { actions } from '../shared/actions/actions';
import { ApiService } from '../services/api.service';
import { CrudService } from '../services/crud.service';
import { GtoolsService } from '../services/gtools.service';

@Component({
  selector: 'app-airline-contract',
  templateUrl: '../shared/views/one-grid.html'
})
export class BunkerComponent implements OnInit {

  private entity = 'Bunker';
  private gridApi;
  public gridOptions: GridOptions;
  rowData: any;
  params: any;
  airlines: any;
  companies: any;

  errors = [];

  // General view init
  listIcon = 'business';
  listTitle = 'Bunker';

  // Column definition
  columnDefs = [
    { headerName: '#', field: 'id', width: 75 },
    { headerName: 'JobNo', field: 'job_no' },
    { headerName: 'Customers', field: 'customers.name' },
    { headerName: 'Quay', field: 'quay.name' },
    { headerName: 'Vessel', field: 'vessel_name.name' },
    { headerName: 'Quantity', field: 'quantity' },
    { headerName: 'Shore Tank', field: 'shore_tank_no' }
  ];

  constructor(
    public httpClient: HttpClient,
    private _api: ApiService,
    private _crud: CrudService,
    private _gt: GtoolsService
  ) {
    // Add column action to grid
    this.columnDefs.push(actions.action);

    this.gridOptions = <GridOptions>{
      context: {
        componentParent: this
      },
      enableColResize: true,
      suppressCellSelection: true,
    };
  }

  ngOnInit() {
  }

  onGridReady(params) {
    // Parent list
    this._api.get(this.entity, 0)
      .subscribe(
        response => {
          this.rowData = response['data'];
          params.api.sizeColumnsToFit();
        },
        err => console.log(err)
      );

    // Dropdown list for Airlines eg [{"value":1, "label":3}]
    this._api.get('customer', 1)
      .subscribe(
        response => {
          this.airlines = response['data'];
        },
        err => console.log(err)
      );
    // Dropdown list for Companies eg [{"value":1, "label":3}]
    this._api.get('Company', 1)
      .subscribe(
        response => {
          this.companies = response['data'];
        },
        err => console.log(err)
      );
    this.gridApi = params.api;
    this.params = params;
  }

  // Update or View  a row
  openDialog(params, crudType) {
    params.airlines = this.airlines;
    params.companies = this.companies;

    // modalComponent, entity, params, crudType, gridApi, errors
    this._crud.openDialog(BunkerModalComponent, this.entity, params, crudType, this.gridApi, this.errors);
  }

  // Create new row
  openCreateDialog() {
    let params = {};
    params['airlines'] = this.airlines;
    params['companies'] = this.companies;

    // modalComponent, entity, params, gridApi, errors
    this._crud.openCreateDialog(BunkerModalComponent, this.entity, params, this.gridApi, this.errors);
  }

  // Delete selected row
  deleteRow(params) {
    // params, entity, gridApi
    this._crud.deleteRow(params, this.entity, this.gridApi);
  }

}
/*
*   Airline Contract Modal Component
*/

@Component({
  selector: 'app-bunker-modal',
  templateUrl: './bunker-modal.component.html'
})
export class BunkerModalComponent implements OnInit {

  modalIcon: string;
  modalTitle = 'Bunker';
  crudType: string;
  form: FormGroup;
  idText: string = ''; // Display id on edit/view header

  params: any;
  airlines: any;
  companies: any;

  constructor(
    private _api: ApiService,
    private _gt: GtoolsService,
    private fb: FormBuilder,
    private dialogRef: MatDialogRef<BunkerModalComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any, public HttpClient: HttpClient) {

    this.crudType = data.crudType;
    this.modalIcon = (this.crudType == 'new' ? 'add' : (this.crudType == 'view' ? 'visibility' : 'edit'));
    this.params = data.params;
    this.airlines = data.params.airlines;
    this.companies = data.params.companies;
  }

  ngOnInit() {
    // console.log(this.params);

    if (typeof this.params.data !== 'undefined') {
      this.idText = '(id' + this.params.data.id + ')';
      this.form = this.fb.group({
        customer: [this.params.data.airline.id],

      });
    } else {

      this.form = this.fb.group({
        customer: [''],
      });

    }

  }

  save() {
    // Format bay value from select formfield
    let company = null;
    if (this.companies && this.form.value.company) {
      company = this.companies.find(s => s.value == this.form.value.company);
      this.form.value.company = { 'id': company.value, 'name': company.label };
    }
    let airline = null;
    if (this.airlines && this.form.value.airline) {
      airline = this.airlines.find(s => s.value == this.form.value.airline);
      this.form.value.airline = { 'id': this.form.value.airline, 'name': airline.label };
    }

    // Format to insert in DB
    this.form.value.validity_start = this._gt.dbDateFormatter(this.form.value.validity_start);
    // Format to include today in where conditions
    this.form.value.validity_end = this._gt.todayIncludedFormatter(this.form.value.validity_end);

    console.log(this.form.value);
    this.dialogRef.close(this.form.value);
  }

}