import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { BsModalRef, BsModalService } from 'ngx-bootstrap';
import { AuthenticationService } from '../../../services/authentication.service';
import { CreateUserComponent } from '../../../views/categoryModals/create-user/create-user.component';
import { WalletCreditsComponent } from '../wallet-credits/wallet-credits.component';

@Component({
    selector: 'app-existing-customers',
    templateUrl: './existing-customers.component.html',
    styleUrls: ['./existing-customers.component.css']
})

export class ExistingCustomerComponent implements OnInit {

    dtOptions: DataTables.Settings = {};
    dtTrigger: Subject<any> = new Subject<any>();
    tableData: any[];
    checkedList: any[];
    masterSelected: boolean;
    isWalletUpdateEnabled: boolean;
    startIndex: number;
    endIndex: number;
    bsModalRef: BsModalRef;

    constructor(private authService: AuthenticationService, private modalService: BsModalService) { }

    ngOnInit() {
        this.loadData();
    }
    loadData(){
        this.authService.getAllCustomersByCreatedDate().subscribe((result: { status: string, message: string, data }) => {
            this.tableData = result.data;
            for (let i = 0; i < this.tableData.length; i++) {
                this.tableData[i].isSelected = false;
            }
            this.isWalletUpdateEnabled = false;
            this.dtTrigger.next();
        },(error) => {
            this.tableData = [];
            this.isWalletUpdateEnabled = false;
            this.dtTrigger.next();
        });
        this.dtOptions = {
            columnDefs: [{ type: 'date', 'targets': [1] }],
            order: [[1, 'desc']],
            pageLength: 100,
            scrollX: true
        }
    }

    /*
    @purpose: get all the selected customers.
    */
    getCheckedItemList() {
        this.checkedList = [];
        let index = 0;
        for (index; index < this.tableData.length; index++) {
            if (this.tableData[index].isSelected){
                this.checkedList.push(this.tableData[index]);
            }
        }
    }

    rowSelectedUnselected(){
        this.masterSelected = this.tableData.every(function (item: any) {
            return item.isSelected == true;
        });
        this.getCheckedItemList();
        if (this.checkedList.length > 0) {
            this.isWalletUpdateEnabled = true;
        }else{
            this.isWalletUpdateEnabled = false;
        }
    }

    /*
    @usage: called when selectAll is checked
    @purpose: To select and unselect all checkbox.
    */
    checkUncheckAll() {
        let index = 0;
        this.masterSelected = !this.masterSelected;
        for (index; index < this.tableData.length; index++) {
            this.tableData[index].isSelected = this.masterSelected;
        }
        this.getCheckedItemList();
        if (this.checkedList.length > 0) {
            this.isWalletUpdateEnabled = true;
        }else{
            this.isWalletUpdateEnabled = false;
        }
    }
    createCustomer(){
        this.bsModalRef = this.modalService.show(CreateUserComponent, {
            backdrop: 'static',
            keyboard: false,
            animated: true,
            ignoreBackdropClick: true,
            initialState: {
              title: 'Create User',
              config: "{ backdrop: 'static' }",
              customerPage: true
            }
        });
        this.bsModalRef.content.event.subscribe(modelResult => {
            if(modelResult){
                var table = $('#customerGrid').DataTable();
                table.destroy();
                this.loadData();
            }
        });
    }
    updateWalletCredits(){
        this.bsModalRef = this.modalService.show(WalletCreditsComponent, {
            backdrop: 'static',
            keyboard: false,
            animated: true,
            ignoreBackdropClick: true,
            initialState:{
                selectedUser: this.checkedList
            }
        });
        this.bsModalRef.content.event.subscribe(modelResult => {
            if(modelResult){
                var table = $('#customerGrid').DataTable();
                table.destroy();
                this.loadData();
            }
        });
    }
}