import { Component, OnInit } from '@angular/core';
import { environment } from '../../../environments/environment';
import { ContactService } from '../../contact.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-product-overview',
  templateUrl: './product-overview.component.html',
  styleUrls: ['./product-overview.component.scss']
})
export class ProductOverviewComponent implements OnInit {
  showNav: boolean;
  showMenu = environment.showLandingpageMenu;
  dev_url=environment.hostUrl;
  url: string;
  userData: any;
  logo_1: string;
  organisationName: any;
  supportContact: any;
  text: any;
  backgroundImage: string;
  requestDemo : boolean = false; 
  demoString = "Demo Request"; 
  cpn_showLink: boolean =false;
  showLink: boolean;
  mainSiteurl:any; 
  saanvi_showLink: boolean = false;
  message:any;
  RawDataArr=[];

cartValue:any=[];
cartButton=false;
  data_descip: string;

  constructor(private dataService: ContactService,private router: Router) { 

    let split1 = document.URL.split('//')[1];
    let split2 = split1.split('/')[0]; 
        
    if(split2 == "www.oneqlik.in"){ 
      this.showLink = true;
      this.mainSiteurl  = 'https://www.oneqlik.in/telematics/';
      this.backgroundImage = '../../assets/image/login_bg.jpg';
      this.logo_1  = '../../assets/image/f_logo.jpg' ; 
    }else{  
      console.log("Inside showlink false");
      this.showLink = false;
    }

    if(split2 == "login.cpntrack.com"){ 

      this.cpn_showLink = true;
      this.mainSiteurl  = 'http://www.cpntrack.com/';
    
    }

    if((split2 == "saanvisecurity.in")||(split2 == "www.saanvisecurity.in")){
      this.saanvi_showLink = true;
      this.mainSiteurl  = 'http://site.saanvisecurity.in';
    }
  }

  ngOnInit() {
    let split1 = document.URL.split('//')[1];
    let split2 = split1.split('/')[0];
    this.url = split2;

    this.dataService.dealerInfo(this.url).subscribe(
      data => {
        this.userData = data 
      if(this.url != 'www.oneqlik.in'){    
        this.logo_1    =  this.dev_url+this.userData.logo; 
      }
      
        this.organisationName = (this.url == 'www.oneqlik.in')?'OneQlik':this.userData.organisationName  ; 
        this.supportContact = this.userData.contact_support?this.userData.contact_support : ''; 


        this.text=this.userData.text;
       
      },err=>{
        this.backgroundImage = '../../assets/image/login_bg.jpg' ;
     
      }) 

    
    for(var i = 0; i <this.showMenu.length;i++){
      if (this.url == this.showMenu[i]) {
        this.showNav = true;
        return;
      } else {
        this.showNav = false;
      }
    }

    var message = localStorage.getItem('products');
   
      if(message != undefined){
        var producStr = JSON.parse(message);
        this.message = producStr ; 
      
        console.log('this.message',this.message);
        // if(this.message.cartValue != undefined){
        //   for(var j = 0 ; j<this.message.cartValue.length;j++){
        //     this.cartValue.push(this.message.cartValue[j]);
        //   }
        // }
        // 'Dimension','Battery','Model No.','Weight'
          this.imageURL=this.message.imageUrl;
          let b= {k1:'Weight',k2 : this.message.raw.product_specification?this.message.raw.product_specification.itemWeight:''};
          let c= {k1:'Dimension',k2 : this.message.raw.product_specification?this.message.raw.product_specification.packageDimension:''};
          let d= {k1:'Model No.',k2 : this.message.raw.product_specification?this.message.raw.product_specification.model_number:''};
          let e={k1:'Battery',k2 : this.message.raw.product_specification?this.message.raw.product_specification.battery:''};
          this.RawDataArr.push(b,c,d,e)
      }else{
    
      }
    
  }

  goback(){
    this.router.navigateByUrl('productShop');
  }

  addtocart(){
    console.log('add to cart');
    this.message['addToCart'] = true;
    // this.cartValue=[]; 
    console.log(this.cartValue);
    var newCart = localStorage.getItem('addedToCart');
    console.log('newCart',JSON.parse(newCart));
    if(newCart != undefined){  
      for(var t =0 ;t<JSON.parse(newCart).length;t++){
        this.cartValue.push(JSON.parse(newCart)[t])
      }
      // this.cartValue.push(JSON.parse(newCart));
    }
    this.cartValue.push(this.message);
    localStorage.setItem('addedToCart',JSON.stringify(this.cartValue));
    // this.router.navigateByUrl("product-shop/product-overview");
    this.data_descip = 'Product added to Cart';
    function launch_toast() {
      // console.log(divid);
      var x = document.getElementById("toast")
      //console.log(x);
      x.className = "show";
      setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
   
    }


    launch_toast();

  }

  buynow(){
    this.router.navigateByUrl("product-shop/buyProduct");

  }

imageURL = [];
 getImageUrl(i1){
    var tArr = [];
    if(i1 != undefined){
      tArr = i1;
    }
    
     console.log(tArr);
    if((tArr.length === 0)||(i1==null)||(i1==undefined)){
      var urlDefault ='../../assets/image/noImage.png'
      this.imageURL.push(urlDefault);
    }else{
     
      for(var j =0 ; j <tArr.length ; j++){
        var str = 'http://www.oneqlik.in/';
        var shortenUrl = tArr[j].split('/');
        var shortenUrl_1 = shortenUrl[1] + '/' + shortenUrl[2] + '/' + shortenUrl[3];
        var furl = str + shortenUrl_1 ; 
        this.imageURL.push(furl);
      }
   
    }
    
  }

  removeCart(){
    this.message['addToCart'] = false;
    this.data_descip = 'Product Removed from Cart';
    var padded  =  localStorage.getItem('addedToCart');
    console.log('productAdded',padded);
    if(padded != undefined){
      var prodAdd = JSON.parse(padded);
      for(var  y = 0 ; y<prodAdd.length; y++){
        if(this.message.raw._id  === prodAdd[y].raw._id){
          prodAdd.splice(y,1);
          localStorage.setItem('addedToCart',JSON.stringify(prodAdd));
        }
      }
    }

    function launch_toast() {
      // console.log(divid);
      var x = document.getElementById("toast")
      //console.log(x);
      x.className = "show";
      setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
   
    }
    launch_toast();

  }
}
