import { Component, OnInit } from '@angular/core';
import { RatingModule } from 'primeng/rating';
import { DialogService } from 'primeng/api';
import { AddVariantsComponent } from '../../popups/add-variants/add-variants.component';
import { ProductsService } from '../../../services/products/products.service';
import { Product } from '../../../core/products/Products';
import { CookieService } from 'ngx-cookie-service';
import { AngularMultiSelect } from 'angular2-multiselect-dropdown';

@Component({
  selector: 'app-add-products',
  templateUrl: './add-products.component.html',
  styleUrls: ['./add-products.component.scss']
})
export class AddProductsComponent implements OnInit {
  InventoryDetails: any = [];
  addingValue: number = 7;
  choices: any = [];
  choicesArray: any = [];
  socialNetworkImageUrl: any;
  ulpoadAvatar: any;
  productImages: any = [];
  productImageUrl: any = [];
  taxes: any = [];

  product: any = {};
  productPermision: any = {};
  productImagesObj: any = {};
  productTags: any = {};
  productVariants: any = {};

  productTitle: any = '';
  productTeaser: any;
  rteContentList: any;
  addVariantFlag = false;
  purchaseWhenOutOfStock: any = [];
  trackInvetory: any = [];
  companyId: number;

  // Permision variables
  pageTitle: any = 'Site Name | Page Title';
  pageURL: any = 'http://sitename.aplozen/sitename/blank';
  pageDescription: any;
  pageKeyWords: any;
  permisionType: any = [];

  // Product image variables
  productImageWidth: any = 0;
  productImageHeight: any = 0;
  keepProportion: any = [];
  imageAlternateText: any;

  // Product tags variables
  tags: any = [];

  cities:any;
  selectedCity:any;
  editorOptions:any;
  resizeImage:any;
  addToCouponCodes:any;
  val1:any;
  addToBulkDiscounts:any;
  addToQuantityDiscount:any;

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

  ngOnInit() {
    this.companyId = +this.cookieService.get('CompanyId');
    this.InventoryDetails = [
      { name: "Price", value: 0, inputsCount: [{ input: 'Medium', value: 0 }] },
      { name: "SKU", value: 1, inputsCount: [{ input: 'Medium', value: '' }] },
      { name: "Barcode", value: 2, inputsCount: [{ input: 'Medium', value: '' }] },
      { name: "Quantity", value: 3, inputsCount: [{ input: 'Medium', value: 0 }] },
      { name: "Weights", value: 4, inputsCount: [{ input: 'Medium', value: 0 }] },
      { name: "Status", value: 5, inputsCount: [{ input: 'Medium', value: '' }] },
      { name: "Visibility", value: 6, inputsCount: [{ input: 'Medium', value: 0 }] }
    ]
  }

  // Open and add variant to list
  addVariant() {
    this.choicesArray = [];
    const ref = this.dialogService.open(AddVariantsComponent, {
      header: 'Add Variants',
      width: '20%',

    });

    ref.onClose.subscribe((obj) => {
      if (obj) {
        for (var a = 0; a < obj.choices.length; a++) {

          this.choices = {
            input: obj.choices[a],
            value: 0
          }
          this.choicesArray.push(this.choices);
        }
        for (let detail of this.InventoryDetails) {
          detail.inputsCount = this.choicesArray;
        }

        const addVariantObj = {
          name: obj.variant,
          value: this.addingValue,
          inputsCount: this.choicesArray
        }
        this.InventoryDetails.push(addVariantObj);
        console.log('Test', this.InventoryDetails);
        this.addVariantFlag = true;
        var element = this.InventoryDetails[this.addingValue];
        this.InventoryDetails.splice(this.addingValue, 1);
        this.InventoryDetails.splice(0, 0, element);
        this.addingValue = this.addingValue + 1;
      }
    });
  }
  
  test() {
    console.log('Test', this.InventoryDetails);
  }

  // Upload social network image
  UploadSocialNetworImage(event: any): void {

    let files = event.target.files[0];

    if (files) {
      let reader = new FileReader();
      reader.onload = (e: any) => {
        this.socialNetworkImageUrl = e.target.result;
      }
      reader.readAsDataURL(files);
    }
    this.ulpoadAvatar = event.target.files[0];
  }

  // Upload product images
  UploadProductImages(event: any): void {
    let files = event.target.files[0];

    if (files) {
      let reader = new FileReader();
      reader.onload = (e: any) => {
        this.productImageUrl = e.target.result;
        const imageObj = {
          name: this.imageAlternateText,
          image: this.productImageUrl
        }
        this.productImages.push(imageObj)
      }
      reader.readAsDataURL(files);
    }
    this.ulpoadAvatar = event.target.files[0];
  }

 

  // Save product
  saveNewProduct() {

    if (this.addVariantFlag === false) {

      this.product.ProductTitle = this.productTitle;
      if (this.taxes.length > 0) {
        this.product.Tax = true
      } else {
        this.product.Tax = false;
      }
      this.product.Price = this.InventoryDetails[0].inputsCount[0].value;
      if (this.InventoryDetails[6].inputsCount[0].value === 1) {
        this.product.Visible = true
      } else {
        this.product.Visible = false;
      }
      this.product.Quantity = this.InventoryDetails[3].inputsCount[0].value;
      this.product.Teaser = this.productTeaser;
      this.product.ProductContent = this.rteContentList;
      if (this.purchaseWhenOutOfStock.length > 0) {
        this.product.AllowWhenOutOfStock = true
      } else {
        this.product.AllowWhenOutOfStock = false;
      }
      if (this.trackInvetory.length > 0) {
        this.product.TrackInventory = true
      } else {
        this.product.TrackInventory = false;
      }
    }

    this.productService.CreateNewProduct(this.product, this.companyId)
      .subscribe(res => {
        console.log('Returned product id', this.productPermision)
        if (this.productPermision) {
          this.saveProductPermisions(res);
        }
        if (this.productImagesObj) {
          this.saveProductImages(res);
        }
        if (this.productTags) {
          this.saveProductTags(res);
        }
      }, error => { console.log('Error', error) })
  }

  // Save product permisions
  saveProductPermisions(productId) {

    this.productPermision.ProductId = productId;
    this.productPermision.PermisionType = this.permisionType
    this.productPermision.PageTitle = this.pageTitle;
    this.productPermision.PageDescription = this.pageDescription;
    this.productPermision.PageURL = this.pageURL;
    this.productPermision.Keywords = this.pageKeyWords;
    this.productPermision.Image = this.socialNetworkImageUrl;
    console.log('test post permissions', this.permisionType)
    this.productService.CreateNewProductPermisions(this.productPermision, this.companyId)
      .subscribe(res => {

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

  // save product images
  saveProductImages(productId) {

    for (let productImage of this.productImages) {

      this.productImagesObj.ProductId = productId;
      this.productImagesObj.Image = productImage.image;
      this.productImagesObj.Width = this.productImageWidth;
      this.productImagesObj.Height = this.productImageHeight;
      this.productImagesObj.AlternateText = productImage.name;
      if (this.keepProportion.length > 0) {
        this.productImagesObj.ImagePropotion = true
      } else {
        this.productImagesObj.ImagePropotion = false;
      }

      this.productService.CreateNewProductImages(this.productImagesObj, this.companyId)
        .subscribe(res => {

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

    }
  }

  // Save product tags
  saveProductTags(productId) {

    for (let tag of this.tags) {
      this.productTags.ProductId = productId;
      this.productTags.Tag = tag;

      this.productService.CreateNewProductTags(this.productTags, this.companyId)
        .subscribe(res => {
        }, error => { console.log('Error', error) })
    }
  }

  // Add variant to product
  addVariantToProduct(){

  }
}