import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ProductsService } from '../services/products/products.service';
import { ProductInventory } from '../core/products/ProductInventory';
import { DialogService } from 'primeng/api';
import { CookieService } from 'ngx-cookie-service';
import { AddCategoriesComponent } from './popups/add-categories/add-categories.component';

@Component({
  selector: 'app-bulk-edit',
  templateUrl: './bulk-edit.component.html',
  styleUrls: ['./bulk-edit.component.scss'],
  providers: [DialogService]
})
export class BulkEditComponent implements OnInit {
  cols: any;
  BulEditTabelData: any;
  productBulk: any = [{}];
  companyId: number = 17;
  ProductInventories: any = [];
  Test: ProductInventory[] = [];
  subCount: any[] = ['1', '2'];
  AddedColumns: any = [];
  selectedColumn: any;
  selectedCategories: any = [];
  product: any = {}
  productListToUpdate: any = [];

  // Add column flag variables
  VenderFlag = true;
  SKUFlag = true;
  InventoryFlag = true;
  PriceFlag = true;
  TeaserFlag = false;

  constructor(private route: ActivatedRoute, private productService: ProductsService, public dialogService: DialogService, private cookieService: CookieService) { }

  ngOnInit() {
    this.companyId = +this.cookieService.get('CompanyId');
    this.cols = [
      { name: 'Teaser', code: 'Teaser' }
    ];

    //Get rote params
    this.route.params.subscribe(params => {
      this.productBulk = JSON.parse(params.p)
      for (var i = 0; i < this.productBulk.length; i++) {
        this.expandRow(this.productBulk[i].Id);
      }
    });

    // this.getTableColums();
    this.getTabledata();
  }

  getTableColums() {

  }

  getTabledata() {
    this.AddedColumns = [
      {
        id: 1,
        name: "Vender"
      },
      {
        id: 2,
        name: "SKU"
      },
      {
        id: 3,
        name: "Inventory"
      },
      {
        id: 4,
        name: "Default Price"
      },
    ]
  }

  // Expand and get product inventries by product id
  expandRow(e) {
    console.log('Product id', e)

    this.productService.GetProductInventories(this.companyId, e)
      .subscribe(res => {
        this.ProductInventories = res;
        for (var a = 0; a < this.productBulk.length; a++) {
          for (var b = 0; b < this.ProductInventories.length; b++) {

            if (this.productBulk[a].Id === this.ProductInventories[b].ProductId) {
              this.productBulk[a].Expand = this.ProductInventories;
              console.log('Product inventories res', this.productBulk)
            }
          }
        }

      }, error => console.log('Error', error))
  }

  // Remove columns from added list
  removeFromAddedList(id, acc) {
    this.AddedColumns = this.AddedColumns.filter(column => column.id != id)
    if (id === 1) {
      const obj = {
        name: 'Vender',
        code: 'Vender'
      }
      this.cols.push(obj);
      acc.options = this.cols;
      this.VenderFlag = false;

    } else if (id === 2) {
      const obj = {
        name: 'SKU',
        code: 'SKU'
      }
      this.cols.push(obj);
      acc.options = this.cols;
      this.SKUFlag = false;


    } else if (id === 3) {
      const obj = {
        name: 'Inventory',
        code: 'Inventory'
      }
      this.cols.push(obj);
      acc.options = this.cols;
      this.InventoryFlag = false;

    } if (id === 4) {
      const obj = {
        name: 'Default Price',
        code: 'Default Price'
      }
      this.cols.push(obj);
      acc.options = this.cols;
      this.PriceFlag = false;


    } else if (id === 5) {
      const obj = {
        name: 'Teaser',
        code: 'Teaser'
      }
      this.cols.push(obj);
      acc.options = this.cols;
      this.TeaserFlag = false;
    }
  }

  // Add columns to chips frop dropdown
  addColumn(selectedColumn) {

    this.cols = this.cols.filter(column => column.code != selectedColumn.code);
    if (selectedColumn.code === 'Vender') {
      const obj = {
        id: 1,
        name: 'Vender'
      }
      this.AddedColumns.push(obj)
      this.VenderFlag = true;

    } else if (selectedColumn.code === 'SKU') {
      const obj = {
        id: 2,
        name: 'SKU'
      }
      this.AddedColumns.push(obj)
      this.SKUFlag = true;

    } else if (selectedColumn.code === 'Inventory') {
      const obj = {
        id: 3,
        name: 'Inventory'
      }
      this.AddedColumns.push(obj)
      this.InventoryFlag = true;

    } else if (selectedColumn.code === 'Default Price') {
      const obj = {
        id: 4,
        name: 'Default Price'
      }
      this.AddedColumns.push(obj)
      this.PriceFlag = true;

    } else if (selectedColumn.code === 'Teaser') {
      const obj = {
        id: 5,
        name: 'Teaser'
      }
      this.AddedColumns.push(obj)
      this.TeaserFlag = true;
    }
  }

  // Open add categories PopUp
  openAddCategoriesPopUp(id) {
    const ref = this.dialogService.open(AddCategoriesComponent, {
      data: {
        id: id
      },
      header: 'Choose Categories',
      width: '20%',

    });

    ref.onClose.subscribe((obj) => {
      if (obj) {
        console.log('Parsing Obj', obj)
        for (let objInstance of obj) {
          this.selectedCategories.push(objInstance);
        }

      }
    });
  }

  // Save categories of products

  saveCategoriesOfProducts() {
    console.log('Categories', this.selectedCategories)
    if (this.selectedCategories.length > 0) {
      for (var i = 0; i < this.selectedCategories.length; i++) {
        this.productService.CreateCategoriesOfProducts(this.selectedCategories[i], this.companyId)
          .subscribe(res => {
          }, error => { console.log('Error', error) })
      }
    }
  }


  // Save product visibility
  onRateVisible(e, value, product) {
    this.product = product
    if (value === 1) {
      this.product.Visible = true
    } else {
      this.product.Visible = false
    }
    console.log(this.product)
    this.productService.UpdateProduct(this.product, this.companyId)
      .subscribe(res => {

      }, error => { console.log("Error", error) })

  }

  onRateFeatured(e, value, product) {
    this.product = product
    if (value === 1) {
      this.product.Featured = true
    } else {
      this.product.Featured = false
    }
  }

}