import {Component, OnInit, EventEmitter, Output, Input} from '@angular/core';
import {CompactType, DisplayGrid, GridsterConfig, GridsterItem, GridType} from 'angular-gridster2';
import {DashboardReportGridService} from './dashboard-report-grid.service';


@Component({
    selector: 'app-dashboard-report-grid',
    templateUrl: './dashboard-report-grid.component.html',
    styleUrls: ['./dashboard-report-grid.component.css']
})
export class DashboardReportGridComponent implements OnInit {

    @Input ("reportMode") reportMode : string;
    options: GridsterConfig;
    originalDashboardLength: number;
    reportNo: {};
    reportDataList: any;
    reportChartList: any;
    filteredItemsData: any;
    filteredItemsChart: any;
    // dashboard : {}[];
    reportList: {}[];
    showSpinner: boolean;
    hideChart: true;

    @Input('fetchedDashboardObj') dashboard: Array<GridsterItem> = [];
    // @Input("fetchedDashboardObj") fetchedDashboardObj : any;


    @Output() transferDashboardObj = new EventEmitter<any>();
    name: any;

    constructor(private _dashboardReportGridService: DashboardReportGridService) {
        this.reportDataList = [];
        this.reportChartList = [];
        this.reportList = [];
    }

    ngOnInit() {

        this.showSpinner = true;
        // this.dashboard = this.fetchedDashboardObj;


        this.options = {
            gridType: GridType.Fixed,
            margin: 10,
            outerMargin: true,
            outerMarginTop: 10,
            outerMarginRight: 10,
            outerMarginBottom: 700,
            outerMarginLeft: 10,
            scrollSensitivity: 10,
            scrollSpeed: 20,
            emptyCellDragMaxCols: null,
            emptyCellDragMaxRows: null,
            emptyCellDropCallback: this.emptyCellClick.bind(this),
            emptyCellDragCallback: this.emptyCellClick.bind(this),
            ignoreContentClass: 'gridster-item-content',
            enableOccupiedCellDrop: true,
            ignoreMarginInRow: false,
            draggable: {
                enabled: true,
            },
            resizable: {
                enabled: true,
            },
            swap: false,
            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,
        };


        if(this.reportMode !== 'Copy'){
        this._dashboardReportGridService.getReportList()
            .subscribe((responseReportList) => {
                let i = 0;

                while (responseReportList['rows'][0][i]) {
                    let j = 0;
                    let name = '';
                    let id = '';

                    while (responseReportList['rows'][0][i][j]) {
                        if (responseReportList['rows'][0][i][j]['columnId'] === 'rep_id') {
                            id = responseReportList['rows'][0][i][j]['searchresultField']['displayValue'];
                        }

                        if (responseReportList['rows'][0][i][j]['columnId'] === 'rep_name') {
                            name = responseReportList['rows'][0][i][j]['searchresultField']['displayValue'];
                        }


                        j++;
                    }
                    this.reportDataList.push({name: name, id: 'Data#' + id, hideDisplay: false});
                    this.reportChartList.push({name: name, id: 'Chart#' + id, hideDisplay: false});
                    i++;
                }
                this.assignCopy();
                this.showSpinner = false;
            });

        }
       
        this.assignCopy();
    }

    changedOptions() {
        if (this.options.api && this.options.api.optionsChanged) {
            this.options.api.optionsChanged();
        }
    }

    assignCopy() {

        this.filteredItemsData = Object.assign([], this.reportDataList);
        this.filteredItemsChart = Object.assign([], this.reportChartList);


    }

    filterItem(value) {
        if (!value) {
            this.assignCopy();
        } // when nothing has typed
        this.filteredItemsData = Object.assign([], this.reportDataList).filter(
            item => (item['name'].toLowerCase().indexOf(value.toLowerCase()) > -1 || item['id'].toLowerCase().indexOf(value.toLowerCase()) > -1)
        );
        this.filteredItemsChart = Object.assign([], this.reportChartList).filter(
            item => (item['name'].toLowerCase().indexOf(value.toLowerCase()) > -1 || item['id'].toLowerCase().indexOf(value.toLowerCase()) > -1)
        );
    }

    emptyCellClick(event: MouseEvent, item: GridsterItem) {
        console.log(this.dashboard);
        this.dashboard.push(item);
    }

    removeItem($event, item) {
        $event.preventDefault();
        $event.stopPropagation();
        this.dashboard.splice(this.dashboard.indexOf(item), 1);
        console.log(item.hasContent['id'].split('#')[0]);
        if (item.hasContent['id'].split('#')[0] === 'Data') {
            this.reportDataList.push(item.hasContent);
            this.assignCopy();
        }

        if (item.hasContent['id'].split('#')[0] === 'Chart') {
            this.reportChartList.push(item.hasContent);
            this.assignCopy();
        }

    }

    addItem() {
        this.dashboard.push({
            x: 0,
            y: 0,
            cols: 1,
            rows: 1,
            dragEnabled: true,
            resizeEnabled: true,
            label: 'Drag&Resize Enabled',
            hasContent: 'Hey'
        });
    }

    dragStartHandler(ev, report: {}) {

        this.originalDashboardLength = this.dashboard.length;
        ev.dataTransfer.setData('text/plain', 'Drag Me Button');
        ev.dataTransfer.dropEffect = 'copy';
        this.reportNo = report;
        console.log(this.reportNo);


        console.log(this.dashboard.length);


    }

    ngDoCheck() {
        if (this.dashboard.length > this.originalDashboardLength) {
            console.log(this.reportNo);
            this.dashboard[this.dashboard.length - 1]['hasContent'] = this.reportNo;


            for (let i = 0; i < this.reportDataList.length; i++) {
                if (this.reportDataList[i]['id'] === this.reportNo['id']) {
                    this.reportDataList.splice(i, 1);
                    this.assignCopy();
                }
            }

            for (let i = 0; i < this.reportChartList.length; i++) {
                if (this.reportChartList[i]['id'] === this.reportNo['id']) {
                    this.reportChartList.splice(i, 1);
                    this.assignCopy();
                }
            }

        }
        if (this.dashboard.length == this.originalDashboardLength) {
            console.log('hello');
        }

        this.transferDashboardObj.emit(this.dashboard);
    }

    setHideDisplay(item: GridsterItem) {
        this.transferDashboardObj.emit(this.dashboard);
    }
}