import {Component, OnInit, Input, AfterViewInit, ViewChild, ElementRef, ChangeDetectorRef} from '@angular/core';
import {GridsterConfig, GridType, GridsterItem} from 'angular-gridster2';
import {MatTableDataSource} from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';

import {MatSort} from '@angular/material';
import {Router} from '@angular/router';
import {RunService} from '../../run.service';
import {FormControl} from '@angular/forms';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {environment} from '../../../../../environments/environment';
import {DisplayHtml} from '../../../../pages/analytics/Report_List/Report/display-html';
import {ErrorModalComponent} from '../../../../modals/error-modal/error-modal.component';
import {DashboardReportService} from '../run-dashboard-report/dashboard-report.service';
import {HttpCacheService} from '../../../../shared/services/cache.service';

export interface PeriodicElement {

}

const ELEMENT_DATA: PeriodicElement[] = [{}];

@Component({
    selector: 'app-run-cross-tab-report',
    templateUrl: './run-cross-tab-report.component.html',
    styleUrls: ['./run-cross-tab-report.component.scss']
})
export class RunCrossTabReportComponent implements OnInit {

    @Input('reportId') inputReportId: string;
    @Input('queryString') queryString: string;
    @Input('hitCnt') hitCnt: number;
    @Input('reportType') reportType: string;
    @Input('reportMode') reportMode: string;
    @Input('parentId') parentId: string;
    @Input('groupSelectValue') groupSelectValue: string;
    @Input('isGoBack') isGoBack: string;
    dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
    @ViewChild(MatPaginator, {static: false} as any) paginator: MatPaginator;
    @ViewChild(MatSort, {static: false} as any) sort: MatSort;
    @ViewChild('iframe') iframe: ElementRef;
    options: GridsterConfig;
    dashboard: Array<GridsterItem> = [];
    displayedColumns: string[];
    IncomingReportId: string;
    displayedColumnsArr: string[];
    displayedRowObj: {}[];
    formFieldPresent: boolean;
    showSpinner: boolean;
    formFieldList: {}[];
    isReady: boolean;
    responseFormFieldListLength: number;
    NEWdisplayedColumns: string[];
    initCnt: number;
    reportName: string;
    showDashboardReport: boolean;
    checkCnt: number;
    initialQueryString: string;
    initCounter: number;
    runButtonHitCounter: number;
    showChart = false;
    displayColumValue: string;
    displayTotal: any[];
    nodeName: string;
    uploadId: string;
    ecgi: string;
    lac: string;
    cid: string;
    commentCtrl = new FormControl();
    replaceDisplayValue: String;
    saveResponseObj: any;
    customFieldsDataArray: any[];
    private chartRunUrl: string;
    pageSize = [];
     download_in_progress = false;

    constructor(private _dashboardReportService: DashboardReportService,
                private _router: Router,
                private _runService: RunService,
                private ngModal: NgbModal,
                private changeDetectorRefs: ChangeDetectorRef,
                public ngbModal: NgbModal,
                private httpCacheService: HttpCacheService) {
        this.initCounter = 0;
        this.runButtonHitCounter = 0;
        this.pageSize = [];
    }

    ngOnInit() {
        this.initialQueryString = this.queryString;
        this.initCounter++;
        this.runButtonHitCounter = this.hitCnt;
        if (this.reportType === 'Chart') {
            this.showChart = true;
        }
        this.initialProcesses();
    }

    initialProcesses() {
        // this.dataSource.paginator = this.paginator;
    }

    ngOnChanges() {
        if (this.initialQueryString !== this.queryString && this.initCounter > 0 && this.runButtonHitCounter !== this.hitCnt) {
            this.initialQueryString = this.queryString;
            this.runButtonHitCounter = this.hitCnt;
            this.initialProcesses();
            this.afterViewInitProcesses();
        } else {
            this.runButtonHitCounter = this.hitCnt;
            this.initialQueryString = this.queryString;
        }
    }

    ngAfterViewInit() {
        this.afterViewInitProcesses();
    }

    afterViewInitProcesses() {
        if (this.showChart) {
            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
                this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=0';
            this.iframe.nativeElement.setAttribute('src', this.chartRunUrl);
            this.showSpinner = false;
        } else {

            this.displayedColumnsArr = [];
            this.displayedRowObj = [];
            this.displayedColumns = [];
            this.formFieldList = [];
            this.showSpinner = true;
            this.isReady = false;
            this.NEWdisplayedColumns = [];
            this.displayTotal = [];
            if (localStorage.getItem(this.inputReportId)) {
                this.postFetchingReportDataFn(JSON.parse(localStorage.getItem(this.inputReportId)));
                localStorage.removeItem(this.inputReportId);
            } else {
                this._runService.getReportDataWithFormFields(this.queryString, this.inputReportId, this.groupSelectValue)
                    .subscribe((response) => {
                        if (response['errormessage']){
                            this.openErrorModel(response['errormessage']);
                            this.showSpinner = false;
                            this.changeDetectorRefs.detectChanges();
                        } else {
                            this.postFetchingReportDataFn(response);
                        }
                    }, error => {
                        this.openErrorModel('Error occurred while running report: ' + this.inputReportId);
                        this.showSpinner = false;
                        this.changeDetectorRefs.detectChanges();
                    });
            }
        }
    }

    postFetchingReportDataFn(response: any) {
        this.displayedColumnsArr = [];
        this.displayedColumns = [];
        this.customFieldsDataArray = [];
        this.formFieldPresent = false;
        this.responseFormFieldListLength = 0;
        this.reportName = response['reportName'];
        let rdc_cntr = 0;
        while (response['reportDataColumns'][rdc_cntr]) {
            const columnTitle = response['reportDataColumns'][rdc_cntr]['columnTitle'];
            const columnId = response['reportDataColumns'][rdc_cntr]['colId'];
            this.displayedColumnsArr.push(columnTitle + '||' + columnId);
            this.displayedColumns.push(columnId);
            rdc_cntr++;
        }


        /*        let totalCnt = 0;
                while (response['reportTotalDataRows'][totalCnt]) {
                    this.displayTotal.push(response['reportTotalDataRows'][totalCnt]);
                    totalCnt++;
                }*/
        this.customFieldsDataArray = response['reportDataRows'];
        let rdr_cntr = 0;
        while (response['reportDataRows'][rdr_cntr]) {
            let dca_cntr = 0;
            const obj = {};
            const reportDataRows = response['reportDataRows'][rdr_cntr];
            while (this.displayedColumnsArr[dca_cntr]) {
                const rowColumnId = this.displayedColumnsArr[dca_cntr].split('||')[1];
                if (reportDataRows[rowColumnId]) {
                    let drillDownHtml = '';
                    let displayValue = '';
                    drillDownHtml = reportDataRows[rowColumnId]['drillDownURL'];
                    displayValue = reportDataRows[rowColumnId]['displayValue'];
                    if (drillDownHtml !== null &&
                        drillDownHtml.length > 0 &&
                        !displayValue.includes('linkToReport')) {
                        const value = this.convertToLinkToReport(drillDownHtml);
                        if (value.length > 0) {
                            let valueCount = [];
                            let valueDisplay = '';
                            valueCount = reportDataRows[rowColumnId]['displayValue'].split('|');
                            if (valueCount.length > 1 && this.reportType === 'Cross-Tab') {
                                for (let count = 0; count < valueCount.length - 1; count++) {
                                    valueDisplay = valueDisplay + valueCount[count];
                                }
                                this.replaceDisplayValue = value + ',' + valueDisplay;
                            } else {
                                this.replaceDisplayValue = value + ',' + reportDataRows[rowColumnId]['displayValue'];
                            }
                        } else {
                            this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
                        }
                    } else {
                        this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
                    }
                    let displayObj: DisplayHtml = new class implements DisplayHtml {
                        'background-color': string;
                        'font-family': string;
                        'font-size': string;
                        'font-style': string;
                        'font-weight': string;
                        'text-align': string;
                        'text-decoration': string;
                        color: string;
                    };
                    if (this.reportType === ('Cross-Tab') && reportDataRows[rowColumnId]['displayValueHtml'].includes('|')) {
                        let crossTabDisplayValArr = [];
                        crossTabDisplayValArr = reportDataRows[rowColumnId]['displayValueHtml'].split('|');
                        if (crossTabDisplayValArr.length > 1) {
                            displayObj['background-color'] = crossTabDisplayValArr[1];
                        }
                    }
                    if (reportDataRows[rowColumnId]['displayValueHtml'].includes('setStyle')) {
                        displayObj = JSON.parse(reportDataRows[rowColumnId]['displayValueHtml']);
                    }
                    displayObj['text-align'] = reportDataRows[rowColumnId]['alignment'];
                    if (this.replaceDisplayValue.includes('linkToReport') || this.replaceDisplayValue.includes('linkToFeedback') || this.replaceDisplayValue.includes('linkToMail')
                        || this.replaceDisplayValue.includes('linkToMap')) {
                        let replaceValArr = [];
                        if (this.replaceDisplayValue.includes('linkToReport')) {
                            obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|');
                            replaceValArr = obj[reportDataRows[rowColumnId]['colId']].split('|');
                            if (replaceValArr.length > 4) {
                                const dispValue = replaceValArr[3] + ',' + replaceValArr[4];
                                obj[reportDataRows[rowColumnId]['colId']] = obj[reportDataRows[rowColumnId]['colId']].replace(replaceValArr[3] + '|' + replaceValArr[4], replaceValArr[3] + ',' + replaceValArr[4]) + '|' + JSON.stringify(displayObj);
                            } else {
                                obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|')
                                    + '|' + JSON.stringify(displayObj);
                            }
                        } else {
                            obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|')
                                + '|' + JSON.stringify(displayObj);
                        }
                    } else {
                        obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split('comment-break-line').join('')
                            + '|' + JSON.stringify(displayObj);
                    }
                }
                dca_cntr++;
            }
            this.displayedRowObj.push(obj);
            rdr_cntr++;
        }
        this.pageSize = response['pageSize'];
/*        for (let cntr = 0; cntr < this.displayedColumnsArr.length; cntr++) {
            const columnArrId = this.displayedColumnsArr[cntr].split(',')[1];
            this.displayedColumns.push(columnArrId);
        }*/
        this.pageSize = [response['pageSize']];
        this.showSpinner = false;
        this.dataSource = new MatTableDataSource<PeriodicElement>(this.displayedRowObj);
        this.dataSource.paginator = this.paginator;
        this.changeDetectorRefs.detectChanges();
    }

    linkToReport(reportID: string, queryParameters: string) {
        if (!this.httpCacheService.getPreviousId(this.inputReportId)) {
            this.httpCacheService.setPreviousId(this.inputReportId, 'parent');
        }
        this.httpCacheService.setPreviousId(reportID, this.inputReportId);
        let queryParamsArr = [];
        let columnDrilldownqueryParamsArr = [];
        let groupSelectValue = '';
        if (queryParameters.includes('groupSelectValue')) {
            queryParamsArr = queryParameters.split('&');
            for (let val = 0; val < queryParamsArr.length; val++) {
                if (queryParamsArr[val].includes('groupSelectValue')) {
                    groupSelectValue = queryParamsArr[val].substring(queryParamsArr[val].indexOf('=') + 1, queryParamsArr[val].length);
                }
            }
            this._router.navigate(['v2/run', reportID, queryParameters, groupSelectValue]);
        } else if (queryParameters.includes('SELECTCRITERIA-')) {
            columnDrilldownqueryParamsArr = queryParameters.split('&');
            for (let val = 0; val < columnDrilldownqueryParamsArr.length; val++) {
                if (columnDrilldownqueryParamsArr[val].includes('SELECTCRITERIA-')) {
                    groupSelectValue = columnDrilldownqueryParamsArr[val].substring(columnDrilldownqueryParamsArr[val].indexOf('-') + 1, columnDrilldownqueryParamsArr[val].length);
                }
            }
            this._router.navigate(['v2/run', reportID, queryParameters, groupSelectValue, 'true', '']);
        } else {
            this._router.navigate(['v2/run', reportID, queryParameters, '', 'true', '']);
        }
    }

    linkToMail(mailId: string) {
        const email = 'mailto:' + mailId;
        window.location.href = email;
    }

    applyFilter(filterValue: string) {
        this.dataSource.filter = filterValue.trim().toLowerCase();
    }

    setStyle(rowData: string) {
        let styles = '';
        if (rowData.split('|')[0] === 'linkToReport' || rowData.split('|')[0] === 'linkToFeedback') {
            styles = rowData.split('|')[4];
        } else if (this.reportType = 'Cross-Tab') {
            const rowDataArray = rowData.split('|');
            let crossTabstyles = {};
            if (rowDataArray.length > 1) {
                if (rowDataArray[1].includes('{')) {
                    styles = rowDataArray[1];
                    return JSON.parse(styles);
                } else {
                    crossTabstyles = {'background-color': rowData.split('|')[1]};
                    return crossTabstyles;
                }
            }
        } else {
            styles = rowData.split('|')[1];
        }
        if (styles.includes('{')) {
            return JSON.parse(styles);
        } else {
            return {};
        }
    }

    getDisplayTotal(keys: any) {
        if (this.displayTotal.length > 0) {
            return this.displayTotal[0][keys].displayValue;
        } else {
            return '';
        }
    }

    clearComments() {
        this.commentCtrl.setValue('');
    }

    convertToLinkToReport(value: string) {
        value = value.replace(/;/g, '');
        let outPut = '';
        while (value.includes('c_master=')) {
            const index = value.indexOf('c_master=');
            if (index > 0) {
                value = value.substring(index, value.length);
            } else if (index === 0) {
                value = value.replace('c_master=', '');
            }
        }
        const split = value.split('&');
        // const spltFirst = split[0].split('=');
        if (split[1].length <= 0) {
            return outPut;
        }
        outPut = 'linkToReport,' + split[0] + ',';
        let splitCounter = 1;
        for (splitCounter = 1; splitCounter < split.length; splitCounter++) {
            if (!split[splitCounter].includes('LOGIN_ID=') &&
                !split[splitCounter].includes('display_content=') &&
                !split[splitCounter].includes('drilldown_index=') &&
                !split[splitCounter].includes('show_back_btn=') &&
                !split[splitCounter].includes('r_action')) {
                outPut = outPut + '&' + split[splitCounter];
            }
        }
        return outPut;
    }

    openErrorModel(_message: string) {
        const modalInfoRef = this.ngbModal.open(ErrorModalComponent);
        modalInfoRef.componentInstance.message = _message;
        return modalInfoRef;
    }

    downloadReport(contentType: string, extension: string) {

        this.changeDetectorRefs.detectChanges();
        if (this.showDashboardReport === false) {
            this.download_in_progress = true;
            this._runService.downloadReport(this.inputReportId, extension, this.isGoBack)
                .subscribe((responseExcel) => {

                    this.downLoadFile(responseExcel, contentType, extension, '');
                    this.download_in_progress = false;
                    this.changeDetectorRefs.detectChanges();
                });
        } else {
            this.download_in_progress = true;
            this._runService.getDashboardReportFormFields(this.inputReportId)
                .subscribe((dashboardFormFields) => {
                    /*                    this._runService.runDashboardReport(this.inputReportId, this.queryString)
                                                .subscribe((runDashboardReportResp) => {*/
                    this._runService.downloadDashboardReportExcel(this.inputReportId)
                        .subscribe((responseDownloadDashboardReport) => {
                            this.downLoadFile(responseDownloadDashboardReport, contentType, extension, 'Dashboard');
                            this.download_in_progress = false;
                            this.changeDetectorRefs.detectChanges();
                        });
                    // });

                });
        }
    }

    downLoadFile(data: any, type: string, extension: string, reportType: string) {
        const blob = new Blob([data], {type: type});
        const date = new Date();
        const dateStr =
            ('00' + (date.getMonth() + 1)).slice(-2) +
            ('00' + date.getDate()).slice(-2) +
            date.getFullYear() +
            ('00' + date.getHours()).slice(-2) +
            ('00' + date.getMinutes()).slice(-2) +
            ('00' + date.getMilliseconds());
        let fileName = this.reportName + dateStr + '.' + extension;
        if (reportType === 'Dashboard') {
            fileName = '';
            fileName = reportType + '_' + this.inputReportId + '_' + dateStr + '.' + extension;
        }
        if (window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveBlob(blob, fileName);
        } else {
            const anchor = window.document.createElement('a');
            anchor.href = window.URL.createObjectURL(blob);
            anchor.download = fileName;
            document.body.appendChild(anchor);
            anchor.click();
            document.body.removeChild(anchor);
            window.URL.revokeObjectURL(anchor.href);
        }
    }
}