import { Component, ViewChild } from '@angular/core';
import { ModalModule, ModalDirective } from "ngx-bootstrap/modal";
import { GridOptions } from "ag-grid";
import { StatusEditorComponent } from "./status-editor.component";
import { StatusRendererComponent } from "./status-renderer.component";
import { GridHTTP } from "./gridFunctions/grid-http";
import { NotificationHTTP } from '../../components/globalAppClasses/app.notifications';

@Component({
    selector: 'app-lead-entry-application',
    templateUrl: 'lead-entry.component.html',
    providers: [GridHTTP, NotificationHTTP]
})

export class LeadEntryComponent {
    public myModal;
    public largeModal;
    public smallModal;
    public primaryModal;
    public successModal;
    public warningModal;
    public dangerModal;
    public infoModal;

    public active = new Array();
    public editingMode = false;

    public refresh;

    private username = JSON.parse(sessionStorage.getItem('username'));
    private data = new Array();

    public gridOptions: GridOptions;
    private gridApi;
    private gridColumnApi;
    public openerStatusDefinitions = [
        "Junk Lead",
        "Callback",
        "Prospect",
        "Existing",
        "Do Not Call",
        "Sold",
        "Open Lead"
    ];
    private colDefinitions = [
            {
                headerName: "bid",
                field: "bid",
                hide: true
            },
            {
                headerName: "Date",
                field: "dateE"
            },
            {
                headerName: "Business Name",
                filter:'text',
                field: "bname"
            },
            {
                headerName: "Website",
                filter:'text',
                field: "website"
            },
            {
                headerName: "Phone #",
                filter:'text',
                field: "phone"
            },
            {
                headerName: "First Name",
                filter:'text',
                field: "fname",
                maxWidth: 100
            },
            {
                headerName: "Last Name",
                filter:'text',
                field: "lname",
                maxWidth: 100
            },
            {
                headerName: "Notes",
                filter:'text',
                field: "notes"
            },
            {
                headerName: "Status",
                field: "status",
                editable:true,
                cellClass: 'badge',
                cellClassRules: {
                    'badge-danger': function(params) {return (params.value == "Junk Lead" || params.value == "Existing")},
                    'badge-success': function(params) { return (params.value == "Prospect" || params.value == "Open Lead")},
                    'badge-warning': function(params) { return params.value == "Callback"},
                    'badge-primary': function(params) { return params.value == "Sold"},
                    'badge-secondary': function(params) { return params.value == "Do Not Call"},
                },
                filter:"text",
                cellEditorFramework: StatusEditorComponent,
                cellRendererFramework: StatusRendererComponent
            },
            {
                headerName: "Call",
                field: "call",
                cellRenderer: this.callCellRendererFunc
            }
        ];

    constructor(private _svc:GridHTTP, private _nSvc:NotificationHTTP){
        this.gridOptions = <GridOptions>{};
        this.gridOptions = {
            enableFilter: true,
            columnDefs: this.colDefinitions
        }
        this.active[0] = 1;
        this.active[1] = 0;
    }
    callCellRendererFunc(params) {
        if(params.data.length != undefined && params.data.status != "Do Not Call" && params.data.status != "Existing"){
            var eSpan = document.createElement('button');
            eSpan.innerHTML = '<i class="fa fa-microphone"></i>&nbsp; Call';
            //eSpan.className = 'btn';
            eSpan.className = 'btn-primary .btn-sm';
            eSpan.style.fontSize = '12px';
            eSpan.style.height = params.node.rowHeight*0.8 + 'px';
            eSpan.style.textAlign = "left";
            eSpan.style.width = '75px';
            //console.dir(params);
            eSpan.addEventListener('click', () => {
                var focusedCell = params.api.getFocusedCell().rowIndex;
                var uriParams = params.api.getDisplayedRowAtIndex(focusedCell).data.phone;
                //console.dir();
                //var newWindow = window.open('eye:' + uriParams.replace(new RegExp(' ', 'g'), ''));
            });
            return eSpan;
        }
    }
    sizeToFit() {
        this.gridApi.sizeColumnsToFit();
    }

    onGridReady(params) {
        this.gridApi = params.api;
        this.gridColumnApi = params.columnApi
        this.data = new Array();

        var username = JSON.parse(sessionStorage.getItem('username'));
        var data = {username};
        this._svc.getData(data)
            .subscribe(
                data => {
                    if (!data) {
                        //var newRow = this.createEmptyRow(null);
                        //this.gridApi.updateRowData({add: newRow});
                    } else if ('error' in data){
                        //Display an error here.
                    }
                    else {
                          //console.dir(data);
                          if (typeof data != undefined && data.bname) {
                              var lengthf = data.bname.length;
                              for (var _i = 0; _i < lengthf; _i++) {
                                  var rowDefz = Array();
                                  var addRow = true;
                                  this.colDefinitions.forEach((item, index) => {
                                      if (data[item.field] !== undefined) {
                                          if(item.field == "status") {
                                              if(data[item.field][_i] == 4 || data[item.field][_i] == 5)
                                                  addRow = false;
                                              rowDefz[item.field] = this.openerStatusDefinitions[data[item.field][_i]];
                                          }
                                          else
                                              rowDefz[item.field] = data[item.field][_i];
                                      }
                                  });
                                  if(addRow){
                                      this.gridApi.updateRowData({add: [rowDefz]});
                                      this.data.push(rowDefz);
                                  }
                              }
                          }
                    }
                }
        );

        setTimeout(() => this.autoSizeAll(), 250);
        setTimeout(() => params.api.sizeColumnsToFit(), 500);
        console.dir(this.data);
    }
    onGridSizeChanged(params) {
        params.api.sizeColumnsToFit();
    }
    autoSizeAll() {
        //console.log("Timeout ended.");
        var allColumnIds = [];
        this.gridColumnApi.getAllColumns().forEach(function(column) {
            allColumnIds.push(column.colId);
        });
        this.gridColumnApi.autoSizeColumns(allColumnIds);
    }
    ngOnInit(){
    }

    onAddRow(newItem) {
        var res = this.gridApi.updateRowData({ add: [newItem] });
    }

    createEmptyRow(data){
        //this.gridOptions.rowData = {bname, website, fname, ...}
        var rowDef = new Array();
        if(!data){
            this.gridOptions.columnDefs.forEach((item, index) => {
                rowDef[index] = {};
            });
        }else{
            data.forEach((item, index) => {
                rowDef[index] = data[index];
            });
        }
        return rowDef;
    }
    myEvent(event) {
        this.gridApi.forEachLeafNode((node, index) => {
            if (node.group) {
                //console.log(index + " -> group: " + node.key);
            } else {
                //console.log(index + " -> data: " + JSON.stringify(node.data));
                //var j = JSON.parse(sessionStorage.getItem('gridData'));
                var j = {};
                Object.assign(j, node.data); // Does not work with IE. #COMPATIBILITY
                j = JSON.parse(JSON.stringify(j));
                //var columnReq = {bname: 1, website: 1, fname: 1, lname: 1, status: 1};
                var columnReq = {bname: 1, website: 1, fname: 1, lname: 1, status: 1};
                if(checkAvailableData(columnReq, j)){
                    console.log("Saving grid data.");
                    Object.assign(j, JSON.parse(sessionStorage.getItem('username')));
                    console.dir(j);
                    this._svc.setData(j)
                        .subscribe(
                            data => {
                                if(!data){
                                    console.log("XD");
                                }
                            }
                        );
                    }
                }
            });
    }
    updateClicked(event){
        this.refresh = false;
        this.gridApi.forEachLeafNode((node, index) => {
            if (node.data) {
                var dataRowObject = <any>{};
                //console.log(node.data);
                Object.assign(dataRowObject, node.data);
                dataRowObject = JSON.parse(JSON.stringify(dataRowObject));

                var requiredColumns = {bid: 1, status: 1};
                if(checkAvailableData(requiredColumns, dataRowObject)){
                    //console.log("Updating grid PHP.");
                    //console.dir(dataRowObject);

                    var updatedData = <any>{};
                    updatedData.bid = dataRowObject.bid;

                    updatedData.status = this.getKeyFromArray(dataRowObject.status);
                    console.dir(JSON.parse(JSON.stringify(updatedData)));

                    if(updatedData.status == 5){
                        var data: Object = {username: this.username, bname: dataRowObject.bname}
                        this._nSvc.setWarmLead(data)
                        .subscribe(
                            data => {
                                if(data)
                                    //console.log("All is well.");
                                else
                                    //console.log("Error creating the notification.");
                            }
                        );
                        this.gridApi.updateRowData({remove: [node.data]});
                    }
                    this._svc.updateData(updatedData)
                        .subscribe(
                            data => {
                                if(data == 1)
                                    //data
                                else
                                    console.log(data);
                                //else
                                    //console.log("Error saving data.");
                            }
                    );
                }
            }
        });
        this.gridColumnApi.resetColumnState();
        this.gridColumnApi.resetColumnGroupState();
        this.gridApi.setSortModel(null);
        this.gridApi.setFilterModel(null);
    }
    onFilterTextBoxChanged() {
        this.gridOptions.api.setQuickFilter((<HTMLInputElement>document.getElementById('filter-text-box')).value);
        //console.log("onFilterTextBoxChanged() called.");
    }

    getKeyFromArray(value){
        var i = 0;
        for (let key of this.openerStatusDefinitions) {
            if(key == value)
                return i
            else
                i++;
        }
    }
}
function checkAvailableData(requiredColumns, checkedObject){
    var lacksData = 0, isEmpty = 1, keepGoing = true;
    Object.keys(requiredColumns).forEach(key =>{
        if(keepGoing){
            if(!checkedObject[key]){
                lacksData = 1;
            }if(checkedObject[key]){
                isEmpty = 0;
            }if(!isEmpty && lacksData){
                return false;
            }
        }
    });
    if(!isEmpty && keepGoing)
        return true;
    return false;
}