import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { Subject } from 'rxjs';
import { ToastrService } from 'ngx-toastr';
import { ItemService } from '../../../services/item.service';
import { BsModalRef, BsModalService } from 'ngx-bootstrap';
import { ProductImagesComponent } from '../product-images/product-images.component';
import { ProductInfoComponent } from '../product-info/product-info.component';

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

export class AllItemsComponent implements OnInit {

    bsModalRef: BsModalRef;
    filterStates: { state_id: number; flow_state: string; }[] = [];
    dtOptions: DataTables.Settings = {};
    dtTrigger: Subject<any> = new Subject<any>();
    currentItemState: number = 1;
    itemsForm: FormGroup;
    tableData: any[];
    checkedList: any[];
    isMarkAsKeyItemEnabled: boolean;
    isMarkAsPromoItemEnabled: boolean;
    isMarkAsAvailableEnabled: boolean;
    isMarkAsUnavailableEnabled: boolean;
    isMarkAsActiveEnabled: boolean;
    isMarkAsInactiveEnabled: boolean;
    isUpdateImagesEnabled: boolean;
    isUpdateCInfoEnabled: boolean;
    isUpdateTInfoEnabled: boolean;

    constructor(private itemService: ItemService, private toastr: ToastrService, private fb: FormBuilder, private modalService: BsModalService) { }

    ngOnInit() {
        this.filterStates.push({ "state_id": 1, "flow_state": "CUSTOMER" });
        this.filterStates.push({ "state_id": 2, "flow_state": "TEAM" });
        this.loadData(this.currentItemState);
        this.itemsForm = this.fb.group({
            itemState: [this.currentItemState],
        });
    }

    /*
    @usage: called to load the table with data
    @purpose: called whenever there is state changed .
    */
    loadData(id) {
        this.itemService.getItems(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].uom){
                    this.tableData[i].uom_value = this.tableData[i].uom.uom_code;
                }
            }
            this.disableEnableButtons(false);
            this.isUpdateTInfoEnabled = false;
            this.dtTrigger.next();
        });
        this.dtOptions = {
            columnDefs: [{ type: 'number', 'targets': [1] }],
            order: [[1, 'desc']],
            pageLength: 100,
            scrollX: true
        }
    }

    disableEnableButtons(buttonState, item?){
        if(buttonState){
            if(!item.key_item)
                this.isMarkAsKeyItemEnabled = true;
            else
                this.isMarkAsKeyItemEnabled = false;
            if(!item.is_available)
                this.isMarkAsAvailableEnabled = true;
            else
                this.isMarkAsAvailableEnabled = false;
            if(!item.promo_item)
                this.isMarkAsPromoItemEnabled = true;
            else
                this.isMarkAsPromoItemEnabled = false;
            if(item.is_available)
                this.isMarkAsUnavailableEnabled = true;
            else
                this.isMarkAsUnavailableEnabled = false;
            if(!item.active)
                this.isMarkAsActiveEnabled = true;
            else
                this.isMarkAsActiveEnabled = false;
            if(item.active)
                this.isMarkAsInactiveEnabled = true;
            else
                this.isMarkAsInactiveEnabled = false;
            this.isUpdateImagesEnabled = true;
            this.isUpdateCInfoEnabled = true;
        }else{
            this.isMarkAsKeyItemEnabled = false;
            this.isMarkAsAvailableEnabled = false;
            this.isMarkAsPromoItemEnabled = false;
            this.isMarkAsUnavailableEnabled = false;
            this.isMarkAsActiveEnabled = false;
            this.isMarkAsInactiveEnabled = false;
            this.isUpdateImagesEnabled = false;
            this.isUpdateCInfoEnabled = false;
        }
    }

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

    rowSelectedUnselected(item){
        if(item){
            this.checkedList = item;
            if(this.currentItemState === 1){
                this.disableEnableButtons(true, item);
                this.isUpdateTInfoEnabled = false;
            }else{
                this.disableEnableButtons(false);
                this.isUpdateTInfoEnabled = true;
            }
        }
    }

    reloadGridData(){
        var table = $('#invoiceGrid').DataTable();
        table.destroy();
        this.loadData(this.currentItemState);
    }

    markAsKeyItem(){
        this.itemService.markAsKeyItem({item_id: this.checkedList['item_id']}).subscribe((result: { status: string, message: string, data })=>{
            if (result.status === 'success') {
                this.toastr.success('Item updated as key item successfully.');
                this.reloadGridData();
            }
        },(error) => {
            this.toastr.error('Item can not be updated as key item.');
            this.reloadGridData();
        });
    }

    markAsPromoItem(){
        this.itemService.markAsPromoItem({item_id: this.checkedList['item_id']}).subscribe((result: { status: string, message: string, data })=>{
            if (result.status === 'success') {
                this.toastr.success('Item updated as promo item successfully.');
                this.reloadGridData();
            }
        },(error) => {
            this.toastr.error('Item can not be updated as promo item.');
            this.reloadGridData();
        });
    }

    updateItemAvailability(status){
        const itemObj: any = {};
        itemObj.item_id = this.checkedList['item_id'];
        itemObj.is_available = status;
        itemObj.keyOrPromoItem = this.checkedList['key_item'] || this.checkedList['promo_item'];
        this.itemService.updateItemAvailability(itemObj).subscribe((result: { status: string, message: string, data })=>{
            if (result.status === 'success') {
                if(status)
                    this.toastr.success('Item updated as available successfully.');
                else
                    this.toastr.success('Item updated as unavailable successfully.');
                this.reloadGridData();
            }
        },(error) => {
            if(status)
                this.toastr.error('Item can not be updated as available.');
            else
                this.toastr.error('Item can not be updated as unavailable.');
            this.reloadGridData();
        });
    }

    updateItemActiveStatus(status){
        const itemObj: any = {};
        itemObj.item_id = this.checkedList['item_id'];
        itemObj.active = status;
        itemObj.keyOrPromoItem = this.checkedList['key_item'] || this.checkedList['promo_item'];
        this.itemService.updateItemActiveStatus(itemObj).subscribe((result: { status: string, message: string, data })=>{
            if (result.status === 'success') {
                if(status)
                    this.toastr.success('Item updated as active successfully.');
                else
                this.toastr.success('Item updated as inactive successfully.');
                this.reloadGridData();
            }
        },(error) => {
            if(status)
                this.toastr.error('Item can not be updated as active.');
            else
                this.toastr.error('Item can not be updated as inactive.');
            this.reloadGridData();
        });
    }

    updateImages(){
        this.bsModalRef = this.modalService.show(ProductImagesComponent, {
            backdrop: 'static',
            keyboard: false,
            animated: true,
            ignoreBackdropClick: true,
            initialState: {
              config: "{ backdrop: 'static' }",
              itemId: this.checkedList['item_id'],
              category: this.checkedList['category']
            }
        });
    }

    updateInfo(){
        this.bsModalRef = this.modalService.show(ProductInfoComponent, {
            backdrop: 'static',
            keyboard: false,
            animated: true,
            ignoreBackdropClick: true,
            initialState: {
              config: "{ backdrop: 'static' }",
              item: this.checkedList
            }
        });
        this.bsModalRef.content.event.subscribe(res => {
            if(res){
                this.reloadGridData();
            }
        });
    }
}