import {
    AfterViewInit,
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ElementRef,
    Input,
    OnInit,
    SimpleChanges,
    ViewChild
} from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { ActivatedRoute, Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../../../../../../environments/environment';
import { RunService } from '../run.service';
import { GridsterConfig, GridsterItem, GridType } from 'angular-gridster2';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { DisplayHtml } from '../../display-html';
import { FormControl } from '@angular/forms';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';

export interface PeriodicElement {

}

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

@Component({
    selector: 'app-run-report',
    templateUrl: './run-report.component.html',
    styleUrls: ['./run-report.component.css'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class RunReportComponent implements OnInit, AfterViewInit {
    @Input('reportId') inputReportId: string;
    @Input('reportMode') reportMode: string;
    @Input('queryString') queryString: string;
    @Input('DashboardReportObj') DashboardReportObj: Array<GridsterItem>;
    @Input('TriggerFFArr') TriggerFFArr: string[];
    @Input('hitCnt') hitCnt: number;
    @Input('runAgain') runAgain: string;
    @Input('groupSelectValue') groupSelectValue: string;
    @Input('chartType') chartType: string;
    @ViewChild('iframe') iframe: ElementRef;
    @ViewChild(MatPaginator, { static: false } as any) paginator: MatPaginator;
    @ViewChild(MatSort, { static: false } as any) sort: MatSort;
    dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
    displayedColumns: string[];
    IncomingReportId: string;
    displayedColumnsArr: string[];
    displayedRowObj: PeriodicElement[];
    formFieldPresent: boolean;
    showSpinner: boolean;
    formFieldList: {}[];
    isReady: boolean;
    responseFormFieldListLength: number;
    NEWdisplayedColumns: string[];
    initCnt: number;
    reportName: string;
    showDashboardReport: boolean;
    checkCnt: number;
    options: GridsterConfig;
    dashboard: Array<GridsterItem> = [];
    openOptionsFlag: boolean;
    showMoreVert: boolean;
    errorMessage = '';
    stackTrace = '';
    error = false;
    environment: any;
    initialQueryString: string;
    initCounter: number;
    runButtonHitCnt: number;
    chartRunUrl: string;
    url: SafeResourceUrl;
    replaceDisplayValue: String;
    nodeName: string;
    uploadId: string;
    ecgi: string;
    lac: string;
    cid: string;
    displayTotal: any[];
    totalRecords: number;
    pageSize: number;
    download_in_progress: boolean;
    commentCtrl = new FormControl('');
    isChartAvailable = false;
    timeTaken = '...';
    saveResponseObj: any;
    showBackButton = false;

    constructor(private _http: HttpClient,
        private _route: ActivatedRoute,
        private _runService: RunService,
        private _router: Router,
        private changeDetectorRefs: ChangeDetectorRef,
        public sanitizer: DomSanitizer) {
        this.displayedColumnsArr = [];
        this.displayedRowObj = [];
        this.displayedColumns = [];
        this.formFieldList = [];
        this.showSpinner = true;
        this.isReady = false;
        this.NEWdisplayedColumns = [];
        this.initCnt = 0;
        this.checkCnt = 0;
        this.showDashboardReport = false;
        this.openOptionsFlag = false;
        this.showMoreVert = false;
        this.environment = environment;
        this.initCounter = 0;
        this.runButtonHitCnt = 0;
        this.displayTotal = [];
        this.totalRecords = 0;
        this.pageSize = 0;
        this.download_in_progress = false;

    }

    ngOnChanges(changes: SimpleChanges) {
        if (this.reportMode !== 'Regular' && this.initCnt > 0 && changes['runAgain']) {
            this.showMoreVert = false;
            if (changes['queryString']) {
                this.queryString = changes['queryString']['currentValue'];
            }
            if (this.queryString !== this.initialQueryString) {
                this.initCnt = 1;
                this.showDashboardReport = false;
                this.dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
                this.displayedColumnsArr = [];
                this.displayedRowObj = [];
                this.displayedColumns = [];
                this.formFieldList = [];
                this.showSpinner = true;
                this.isReady = false;
                this.NEWdisplayedColumns = [];
                this.displayTotal = [];
                this.isChartAvailable = false;
                this.timeTaken = '...';
                const startDate: Date = new Date();
                const startTime = startDate.getTime();
                this._runService.getReportDataWithFormFields(this.queryString, this.inputReportId)
                    .subscribe((response) => {
                        if (response['errormessage']) {
                            this.showError(response);
                        } else {
                            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
                                this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=0';
                            if (this.reportMode !== 'FormField') {
                                this.postFetchingReportDataFn(response, false);
                                const endDate: Date = new Date();
                                const endTime = endDate.getTime();
                                this.timeTaken = ((endTime - startTime) / 1000).toString();
                                this.showMoreVert = true;
                                this.showDashboardReport = true;
                                this.errorMessage = '';
                                this.error = false;
                            } else {
                                this.postFetchingReportDataFn(response, false);
                                const endDate: Date = new Date();
                                const endTime = endDate.getTime();
                                this.timeTaken = ((endTime - startTime) / 1000).toString();
                                this.showMoreVert = true;
                                this.errorMessage = '';
                                this.error = false;
                            }
                        }
                    });
            }
        } else {
        }
        if (this.initialQueryString !== this.queryString && this.initCounter > 0 && this.hitCnt !== this.runButtonHitCnt) {
            this.runButtonHitCnt = this.hitCnt;
            this.initialQueryString = this.queryString;
            this.initialProcesses();
        } else {
            this.runButtonHitCnt = this.hitCnt;
        }

    }

    ngOnInit() {
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.dataSource.data = this.displayedRowObj;
        this.initialProcesses();
        this.errorMessage = '';
        this.error = false;
    }

    initialProcesses() {
        if (this.DashboardReportObj.length > 0) {
            this.dashboard = this.DashboardReportObj;
            this.options = {
                gridType: GridType.ScrollVertical,
                margin: 10,
                outerMargin: true,
                outerMarginTop: 10,
                outerMarginRight: 10,
                outerMarginBottom: 5000,
                outerMarginLeft: 10,
                scrollSensitivity: 10,
                scrollSpeed: 20,
                emptyCellDragMaxCols: null,
                emptyCellDragMaxRows: null,
                ignoreContentClass: 'gridster-item-content',
                enableOccupiedCellDrop: true,
                ignoreMarginInRow: false,
                draggable: {
                    enabled: true,
                },
                resizable: {
                    enabled: true,
                },
                swap: true,
                pushItems: true,
                disablePushOnDrag: false,
                disablePushOnResize: false,
                pushDirections: { north: true, east: true, south: true, west: true },
                pushResizeItems: true,
                disableWindowResize: true,
                disableWarnings: false,
                scrollToNewItems: true,
                enableDropToAdd: true,
                enableEmptyCellDrop: true,
                minCols: 2,
                minRows: 2,
            };
            this._runService.getDashboardReportFormFields(this.inputReportId)
            .subscribe((dashboardFormFields) => {
                this.download_in_progress = true;
                this._runService.runDashboardReport(this.inputReportId, this.queryString)
                    .subscribe((runDashboardReportResp) => {
                    });
                this.download_in_progress = false;
            });


            this.showDashboardReport = true;

        }
        this.hitCnt = this.runButtonHitCnt;
        this.initialQueryString = this.queryString;
        this.initCounter++;
    }

    ngAfterViewInit() {
        this.afterViewInitialProcesses();
    }

    afterViewInitialProcesses() {
        if (sessionStorage.length > 0) {
            this.showBackButton = true;
        } else {
            this.showBackButton = false;
        }
        if (this.DashboardReportObj.length === 0) {
            if (this.reportMode === 'Regular' && this.initCnt == 0) {
                this.showMoreVert = false;
                this.dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
                this.displayedColumnsArr = [];
                this.displayedRowObj = [];
                this.displayedColumns = [];
                this.formFieldList = [];
                this.showSpinner = true;
                this.isReady = false;
                this.NEWdisplayedColumns = [];
                this.timeTaken = '...';
                const startDate: Date = new Date();
                const startTime = startDate.getTime();
                this._runService.getReportData(this.inputReportId)
                    .subscribe((response) => {
                        if (response['errormessage']) {
                            this.showError(response);
                        } else {
                            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
                                this.inputReportId + '&refresh=Y&display_content=Y&r_page=0';
                            this.postFetchingReportDataFn(response, false);
                            const endDate: Date = new Date();
                            const endTime = endDate.getTime();
                            this.timeTaken = ((endTime - startTime) / 1000).toString();
                            this.showMoreVert = true;
                        }
                    });
            } else {
                this.showMoreVert = false;
                this.dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
                this.displayedColumnsArr = [];
                this.displayedRowObj = [];
                this.displayedColumns = [];
                this.formFieldList = [];
                this.showSpinner = true;
                this.isReady = false;
                this.NEWdisplayedColumns = [];
                this.timeTaken = '...';
                const startDate: Date = new Date();
                const startTime = startDate.getTime();
                if (localStorage.getItem(this.inputReportId)) {
                    this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
                        this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=0';
                    this.postFetchingReportDataFn(JSON.parse(localStorage.getItem(this.inputReportId)), false);
                    this.saveResponseObj = JSON.parse(localStorage.getItem(this.inputReportId));
                    const endDate: Date = new Date();
                    const endTime = endDate.getTime();
                    this.timeTaken = ((endTime - startTime) / 1000).toString();
                    this.showMoreVert = true;
                    localStorage.removeItem(this.inputReportId);
                } else {
                    this._runService.getReportDataWithFormFields(this.queryString, this.inputReportId)
                        .subscribe((response) => {
                            if (response['errormessage']) {
                                this.showError(response);
                            } else {
                                this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
                                    this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=0';
                                this.saveResponseObj = response;
                                this.postFetchingReportDataFn(response, false);
                                const endDate: Date = new Date();
                                const endTime = endDate.getTime();
                                this.timeTaken = ((endTime - startTime) / 1000).toString();
                                this.showMoreVert = true;
                            }
                        });
                }
            }
        } else {
            this.showMoreVert = true;
            this.showSpinner = false;
        }
        this.errorMessage = '';
        this.error = false;
        this.initCnt = 1;
    }

    showError(Errresponse: any) {
        this.errorMessage = Errresponse['errormessage'];
        this.stackTrace = Errresponse['stacktrace'];
        this.error = true;
        this.showSpinner = false;
        this.isChartAvailable = false;
    }

    postFetchingReportDataFn(response: any, isPageChange: boolean) {
        this.pageSize = 0;
        this.totalRecords = 0;
        this.displayedColumnsArr = [];
        this.displayedColumns = [];
        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);
            rdc_cntr++;
        }

        if (response['chartWizardAvailable'] === true && this.chartType !== 'none') {
            this.isChartAvailable = true;
            this.iframe.nativeElement.setAttribute('src', this.chartRunUrl);
        }

        let totalCnt = 0;
        while (response['reportTotalDataRows'][totalCnt]) {
            this.displayTotal.push(response['reportTotalDataRows'][totalCnt]);
            totalCnt++;
        }

        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) {
                            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 (reportDataRows[rowColumnId]['displayValueHtml'].includes('{')) {
                        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')) {
                        obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|')
                            + '|' + JSON.stringify(displayObj);
                    } else {
                        obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue
                            + '|' + 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.totalRecords = 0;
        this.totalRecords = response['totalRows'];
        this.showSpinner = false;
        if (!isPageChange) {
            this.paginator.length = this.totalRecords;
            this.paginator.pageSize = this.pageSize;
            this.paginator.pageIndex = 0;
        }
        this.dataSource.data = this.displayedRowObj;
        this.dataSource.sort = this.sort;

    }

    linkToReport(reportID: string, queryParameters: string) {
        localStorage.setItem(this.inputReportId, JSON.stringify(this.saveResponseObj));
        if (sessionStorage.length === 0) {
            sessionStorage.setItem('1', this.inputReportId + '|' + this.queryString);
        } else {
            let length = sessionStorage.length;
            length++;
            sessionStorage.setItem(length.toString(), this.inputReportId + '|' + this.queryString);
        }
        this._router.navigate(['v2/app/run', reportID, queryParameters]);
    }



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

    openOptions() {
        this.openOptionsFlag = !this.openOptionsFlag;
    }

    downloadReport(contentType: string, extension: string) {

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

                    this.downLoadFile(responseExcel, contentType, extension, '');
                    this.download_in_progress = false;
                });
        } else {
            this._runService.getDashboardReportFormFields(this.inputReportId)
                .subscribe((dashboardFormFields) => {
                    this.download_in_progress = true;
                    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;
                });
        }
    }

    downloadSinglePage(contentType: string, extension: string) {
        this.download_in_progress = true;
        this._runService.downloadSinglePageReport(this.inputReportId, extension)
            .subscribe((responseExcel) => {

                this.downLoadFile(responseExcel, contentType, extension, '');
                this.download_in_progress = false;
            });
    }

    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);
        }
    }

    applyFilter(filterValue: string) {
        this.dataSource.data = this.displayedRowObj;
        this.dataSource.sort = this.sort;
        if (filterValue === '' || filterValue === null) {
        } else {
            this.dataSource.filter = filterValue.trim().toLowerCase();
        }
    }

    setStyle(rowData: string) {
        let styles = '';
        if (rowData.split('|')[0] === 'linkToReport') {
            styles = rowData.split('|')[4];
        } else if (rowData.split('|')[0] === 'linkToMail') {
            styles = rowData.split('|')[3];
        } else {
            styles = rowData.split('|')[1];
        }
        if (styles.includes('{')) {
            return JSON.parse(styles);
        } else {
            return {};
        }
    }

    

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

    onPaginationChange(event: any) {
        if (this.DashboardReportObj.length === 0) {
            if (this.reportMode === 'Regular' && this.initCnt === 0) {
                this.showMoreVert = false;
                this.displayedColumnsArr = [];
                this.displayedRowObj = [];
                this.displayedColumns = [];
                this.formFieldList = [];
                this.showSpinner = true;
                this.isReady = false;
                this.NEWdisplayedColumns = [];
                this.isChartAvailable = false;
                this.timeTaken = '...';
                const startDate: Date = new Date();
                const startTime = startDate.getTime();
                this._runService.getReportDataWithPageNo(this.inputReportId, event.pagenum)
                    .subscribe((response) => {
                        if (response['errormessage']) {
                            this.showError(response);
                        } else {
                            const endDate: Date = new Date();
                            const endTime = endDate.getTime();
                            this.timeTaken = ((endTime - startTime) / 1000).toString();
                            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
                                this.inputReportId + '&refresh=Y&display_content=Y&r_page=' + event.pagenum;
                            this.postFetchingReportDataFn(response, true);
                            this.showMoreVert = true;
                        }
                    });
            } else {
                this.showMoreVert = false;
                this.displayedColumnsArr = [];
                this.displayedRowObj = [];
                this.displayedColumns = [];
                this.formFieldList = [];
                this.showSpinner = true;
                this.isReady = false;
                this.NEWdisplayedColumns = [];
                this.isChartAvailable = false;
                this.timeTaken = '...';
                const startDate: Date = new Date();
                const startTime = startDate.getTime();
                this._runService.getReportDataWithFormFieldsWithPageNo(this.queryString, this.inputReportId, event.pageIndex)
                    .subscribe((response) => {
                        if (response['errormessage']) {
                            this.showError(response);
                        } else {
                            const endDate: Date = new Date();
                            const endTime = endDate.getTime();
                            this.timeTaken = ((endTime - startTime) / 1000).toString();
                            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
                                this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=' + event.pagenum;
                            this.postFetchingReportDataFn(response, true);
                            this.showMoreVert = true;
                        }
                    });
            }
        } else {
            this.showMoreVert = true;
            this.showSpinner = false;
        }
        this.errorMessage = '';
        this.error = false;
        this.initCnt = 1;
    }

    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('&');
        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;
    }

    takeToReport(queryString: string, reportID: string) {
        this._router.navigate(['v2/app/run', reportID, queryString, this.groupSelectValue]);
    }

    goBack() {
        const length = sessionStorage.length;
        let repId = '';
        let queryString = '';
        if (length > 1) {
            let split = [];
            split = sessionStorage.getItem((length).toString()).split('|');
            repId = split[0];
            queryString = split[1];
            sessionStorage.removeItem((length).toString());
        } else if (length === 1) {
            let split = [];
            split = sessionStorage.getItem('1').split('|');
            repId = split[0];
            queryString = split[1];
            sessionStorage.removeItem('1');
        }
        localStorage.removeItem(this.inputReportId);
        this._router.navigate(['v2/app/run', repId, queryString]);
    }

}