import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { closest } from '@syncfusion/ej2-base';
import { Grid, DetailRow, DetailDataBoundEventArgs } from '@syncfusion/ej2-grids';
import { DataService } from './data-service';

Grid.Inject(DetailRow);
@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./style.css', './grid.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class GridComponent {

  constructor(private data: DataService) {   }

  public cashflowGridNormalRes: string = '(min-width: 696px)';

    @ViewChild('cashflowSummaryGrid')
    public grid: Grid;

    public cashflowSummaryData: Object[] = this.data.cashflowSummaryData;

    public childGrid: Object = {
        created: this.childCreated,
        dataBound: this.childDataBound,
        queryString: 'date',
        columns: [
            { field: 'ccy', headerText: 'Currency', textAlign: 'center', minWidth: '160px' },
            { field: 'amount', format: '##,###.##', textAlign: 'center', minWidth: '100px' },
            { field: 'amountInUSD', format: 'C2', headerText: 'Amount in USD', minWidth: '100px', textAlign: 'center', hideAtMedia: '(min-width: 480px)' },
            { field: 'nonFXAC', headerText: 'Non-FX Actual Cashflow', minWidth: '20px', textAlign: 'center', hideAtMedia: '(min-width: 695px)' },
            { field: 'fxHedge', headerText: 'FX Hedge', minWidth: '20px', textAlign: 'center', hideAtMedia: '(min-width: 695px)' }
        ],
        dataSource: this.data.dataUnits
    };

    public dollarFormat: string = 'c2';

    public amountInUSDHideAtMedia: string = '(min-width: 480px)';
    public nonFXACHideAtMedia: string = '(min-width: 695px)';
    public fxHedgeHideAtMedia: string = '(min-width: 695px)';

    /* tslint:disable */
    public childCreated(args: Object): void {
        // (this.getHeaderContent() as HTMLElement).style.display = 'none';
        // this.element.style.display = 'none';
    }
    public childDataBound(args: Object): void {
        // this.element.style.display = '';
    }
    /* tslint:enable */
    public onClick(args: MouseEvent): void {
        let target: Element = args.target as Element;

        if (target.parentElement) {
            if (target.classList.contains('e-row-toggle') || target.parentElement.querySelector('.e-row-toggle')) {

                let querySelector = target.parentElement.querySelector('.e-row-toggle');
                if (querySelector) {
                    target = target.parentElement.querySelector('.e-row-toggle') ? querySelector : target;
                }

                let el = (closest(target, 'tr') as HTMLElement).getAttribute('aria-rowindex');
                if (el) {
                    if (target.classList.contains('e-icon-gdownarrow')) {
                        target.classList.remove('e-icon-gdownarrow');
                        target.classList.add('e-icon-grightarrow');
                        this.grid.detailRowModule.collapse(parseInt(el, 10));
                    } else {
                        target.classList.remove('e-icon-grightarrow');
                        target.classList.add('e-icon-gdownarrow');
                        this.grid.detailRowModule.expand(parseInt(el, 10));
                    }
                }
            }
        }

    }

}
