import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { FormGroup, FormBuilder } from '@angular/forms';
import { BsModalRef, BsModalService } from 'ngx-bootstrap';
import { CommentSectionComponent } from '../comment-section/comment-section.component';
import { WorkflowStateService } from '../../../services/workflowState.service';
import { InvoicesService } from '../../../services/invoices.service';
import { ToastrService } from 'ngx-toastr';

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

export class CustomerIssuesComponent implements OnInit {
    pageName: string = 'for_customer_issue';
    workflowStates: { state_id: number; flow_state: string; }[];
    currentIssueState: number = 2;
    defaultIssueState: number = 0;
    masterSelected: boolean;
    isCloseEnabled: boolean;
    isConfirmedEnabled: boolean;
    isSingleRowSelected: boolean;
    tableData: any[];
    bsModalRef: BsModalRef;
    customerIssuesForm: FormGroup;
    dtTrigger: Subject<any> = new Subject<any>();
    dtOptions: DataTables.Settings = {};
    checkedList: any;

    constructor(private toastr: ToastrService, private fb: FormBuilder, private modalService: BsModalService, private stateService: WorkflowStateService, private invoicesService: InvoicesService) { }

    ngOnInit() {
        this.stateService.getAllWorkflowStateByPage(this.pageName).subscribe((result: { status: string, message: string, data }) => {
            this.workflowStates = result.data;
            this.workflowStates.push({ "state_id": this.workflowStates.length, "flow_state": "ALL STATES" });
            this.customerIssuesForm.controls['customeIssueState'].patchValue(this.workflowStates.find((state) => state.flow_state === 'CONFIRMED').state_id)
        });
        this.loadData(this.currentIssueState);
        this.customerIssuesForm = this.fb.group({
            customeIssueState: [],
        });
    }

    /*
    @usage: called to load the table with data
    @purpose: called whenever there is state changed .
    */
    loadData(id) {
        this.invoicesService.getAllCustomerIssueByState(id).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;
                if(this.tableData[i].issue_state != null && this.tableData[i].workflow_state.flow_state) {
                    this.tableData[i].issueStates = this.tableData[i].workflow_state.flow_state;
                }
            }
            this.masterSelected = false;
            this.isCloseEnabled = false;
            this.isConfirmedEnabled = false;
            this.dtTrigger.next();
        },(error) => {
            this.tableData = [];
            this.masterSelected = false;
            this.isCloseEnabled = false;
            this.isConfirmedEnabled = false;
            this.dtTrigger.next();
        });
        this.dtOptions = {
            columnDefs: [{ type: 'number', 'targets': [1] }],
            order: [[1, 'desc']],
            pageLength: 100,
            scrollX: true
        }
    }

    /*
     @usage: called whenever there is statechange filter is called
     @purpose: based on selected state it will load the data.
    */
     customerIssueStateChanged(stateID) {
        this.currentIssueState = stateID;
        var table = $('#invoiceGrid').DataTable();
        table.destroy();
        if (stateID === this.workflowStates.length)
        this.currentIssueState = this.defaultIssueState;
        this.loadData(this.currentIssueState);
    }

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

    disableButtons(){
        this.isCloseEnabled = false;
        this.isConfirmedEnabled = false;
    }

    enableButtons(checkedList){
        if ( checkedList[0].issueStates.toUpperCase() === 'CONFIRMED' ){
            this.isCloseEnabled = true;
        }else{
            if(checkedList[0].issueStates.toUpperCase() === 'CLOSED'){
                this.isConfirmedEnabled = true;
            }
        }
    }

    /*
    @usage: called whenever single checkbox is selected
    @purpose: update the selected checklist issues
    */
    rowSelectedUnselected(){
        this.masterSelected = this.tableData.every(function (item: any) {
            return item.isSelected == true;
        });
        this.getCheckedItemList();
        if (this.checkedList.length > 0) {
            this.isSingleRowSelected = this.checkedList.length === 1 ? true : false;
            if(this.isSingleRowSelected){
                this.enableButtons(this.checkedList);
            }else{
                this.disableButtons();
            }
        }else{
            this.disableButtons();
        }
    }

    /*
    @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.isSingleRowSelected = this.checkedList.length === 1 ? true : false;
            if(this.isSingleRowSelected){
                this.enableButtons(this.checkedList);
            }else{
                this.disableButtons();
            }
        }else{
            this.disableButtons();
        }
    }

    onClose(){
        this.bsModalRef = this.modalService.show(CommentSectionComponent, {
            initialState: {
                invoiceId:Number(this.checkedList[0].invoice_issue),
                checkedList: this.checkedList[0],
                onClose: true
            }
        });
        this.bsModalRef.content.event.subscribe(res => {
            if(res){
                var table = $('#invoiceGrid').DataTable();
                this.toastr.success('Customer Issue updated successfully.');
                table.destroy();
                this.loadData(this.currentIssueState);
            }else{
                var table = $('#invoiceGrid').DataTable();
                this.toastr.error('Customer Issue Cannot be updated.');
                table.destroy();
                this.loadData(this.currentIssueState);
            }
        });
    }

    onConfirm(){
        this.bsModalRef = this.modalService.show(CommentSectionComponent, {
            initialState: {
                invoiceId:Number(this.checkedList[0].invoice_issue),
                checkedList: this.checkedList[0],
                onClose: false
            }
        });
        this.bsModalRef.content.event.subscribe(res => {
            if(res){
                var table = $('#invoiceGrid').DataTable();
                this.toastr.success('Customer Issue updated successfully.');
                table.destroy();
                this.loadData(this.currentIssueState);
            }else{
                var table = $('#invoiceGrid').DataTable();
                this.toastr.error('Customer Issue Cannot be updated.');
                table.destroy();
                this.loadData(this.currentIssueState);
            }
        });
    }
}