import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MdSnackBar, MdDialog } from '@angular/material';
import { ContactService } from '../../contact.service';

@Component({
  selector: 'app-add-product',
  templateUrl: './add-product.component.html',
  styleUrls: ['./add-product.component.scss']
})
export class AddProductComponent implements OnInit {
  productId : any;
  Product_name : any;
  price :any;
  discount:any;
  currentStock:any;
  productStatus:any = 'Active';
  pStatus =['Active','Inactive'];
  spec1 :any;
  category = ['Personal Tracker','Vehicle Tracker', 'Asset Tracker','Pet Tracker'];
  itmeWeight :any ;
  // pspecification = [{label :"testlabel",nModel :this.spec1,pholder:"this is placeholder", name : "test"}];
  productCategory : any; 
  useridd: any;
  packageDimension:any;
  battery:any;
  model_number:any;
  additionalSpec:any;
  productImages: any=[];


  constructor(public dialog: MdDialog,public snackBar: MdSnackBar,private contactService: ContactService,private router: Router, private route: ActivatedRoute) {
    var  initialObj = {
      doctype:'',
      image:'',
      phone:''
    }
    this.imageuploadObject.push(initialObj);

   }

  ngOnInit() {
    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
  }


  goback(){
    this.router.navigateByUrl("product-summary");   
  }


  ProductSave(){  
    // console.log(this.pspecification);
    console.log('product saved');

    var product_specification = {
      packageDimension: this.packageDimension,
      battery: this.battery,
      model_number: this.model_number,
      additionalSpec: this.additionalSpec,
      itemWeight  :  this.itmeWeight
    }

    var productPayload ={
      productId : this.productId,
      productName : this.Product_name,
      category : this.productCategory,
      price : this.price,
      discountPrice : this.discount,
      status : this.productStatus,
      sellerId : this.useridd,
      curr_stock : this.currentStock,
      update_date : new Date(),
      posteBy : this.useridd,
      product_specification : product_specification
    
    }

    if(this.productImages.length !=0){
      productPayload['productImages'] =this.productImages ; 

    }

    this.contactService.ProductSave(productPayload).subscribe(res=>{
        console.log(res);
    },err=>{
        console.log(err);
    })
  }

  selectedFile: File;
  imageuploadObject : any = [];
  uploadStatus:any ='UPLOAD';
  
  onUpload(imgIndex) {
  
    const fd = new FormData();
    console.log("selected file name =>",this.selectedFile.name);

      fd.append('photo',this.selectedFile,this.selectedFile.name)
      console.log("imgURL=>",fd) ;
      // uploadTrackerImage
      this.contactService.imageuploadTracker(fd)
      .subscribe(res=>{
        console.log(res);
        var resImage ='';
        resImage = res['_body'];
        console.log(res['_body']);
        this.imageuploadObject[imgIndex].image = resImage;
        this.productImages.push(resImage);
         console.log(this.imageuploadObject);
     
      },err=>{
       
      })
    
   }

   docRow : boolean = true
   DeleteDocumentsField(index : any){
    console.log(this.imageuploadObject.length);
    if(this.imageuploadObject.length != 1){
      this.docRow = false;
      this.imageuploadObject.splice(index, 1);
      this.productImages.splice(index, 1);
    }

  }

  AddDocumentsField(addedRow:any){
    console.log("Inside function !!!");
      if(addedRow){    
        this.docRow = true;
      }
       var obj={doctype:'',image:'',phone:''};
       this.imageuploadObject.push(obj);
       console.log(this.imageuploadObject);
  }

  onFileChanged(event) { 
    this.selectedFile = <File>event.target.files[0];
    console.log('this.selectedFile',this.selectedFile); 
  }

  

}
