import { Component, OnInit } from '@angular/core';
import { HyperService } from '../../core/services/http.service';
import { LocalStorage } from "../../core/services/local_storage.service"
import { Router } from "@angular/router";
import {Location} from '@angular/common';
import $ from 'jquery'
declare var $: $
@Component({
  selector: 'app-launch-sales',
  templateUrl: './launch-sales.component.html',
  styleUrls: ['./launch-sales.component.scss']
})
export class LaunchSalesComponent implements OnInit {
  salesList:any=[];
  imageID:number;
  imageUrl:any;
  imageHotspot:any=[];
  activeClass:boolean=false;
  xValue:number;
  yValue:number;
  loader:boolean=false;
  model_name:string;
  constructor(private server: HyperService, private router: Router,private loc:Location) { }

  ngOnInit() {
    this.model_name =  LocalStorage.getValue('model_name')
    $(".lg-hotspot-label").show("fast");
    $(".lg-hotspot-label").hide();
    
    $(".lg-hotspot-button").click(function () {
      var thisLabel = $(this).siblings(".lg-hotspot-label");
      var thisLabelState = thisLabel.css("display");
      // console.log(thisLabel)
      $(".lg-hotspot-label").fadeOut(0).parent().css("z-index", "0");
      if (thisLabelState == "none") {
        thisLabel.fadeIn(0);
        $(this).parent().css("z-index", "999");
      }
    });
    this.salesProcess()
  }
  salesProcess(){
    this.loader=true;
    this.server.get("explore/salesprocess/"+LocalStorage.getValue('set_model_id'))
    .then((data) => {
        if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
          this.loader=false;
            // console.log(data.result.data)
            this.salesList = data.result.data
            this.rotateImage(this.salesList[0])
        } else if (data.result.status == 401 && data.result.response == 'failed') {
            
        } else {
          this.loader=false;
          alert(data.result.message)
        }
    });
}
rotateImage(item){
  var wid = 806/100;
		var hei = 520/100;
  // console.log(item)
  for(let i=0;i<this.salesList.length;i++){
    if(this.salesList[i].id == item.id){
      this.activeClass = true;
      this.imageID =item.id;
      this.imageUrl =item.image.image_url;
      this.imageHotspot=[]
      for(let j=0;j<item.image.hotspot.length;j++){
        // this.xValue = item.image.hotspot[j].point_arr.x;
        // this.yValue = item.image.hotspot[j].point_arr.x;
       let newx = wid*((item.image.hotspot[j].point_arr.x / 1024)*100);
       let newY = hei*((item.image.hotspot[j].point_arr.y / 660)*100);
       let contentTitle = item.image.hotspot[j].title;
       let contentUrl = item.image.hotspot[j].file_url;
       let contentDescription = item.image.hotspot[j].description;
        let obj:any={
            x:newx,y:newY,contentTitle:contentTitle,contentUrl:contentUrl,contentDescription:contentDescription
        };
        this.imageHotspot.push(obj);
        console.log( this.imageHotspot)
        $('body').click(function(){
          $(".lg-hotspot-label").hide();
        })
      }
    }else{
      
    }
  }
}

  hotspotPoint(e,index){
    e.stopPropagation();
    var thisLabel = $(".active-content"+index).siblings(".lg-hotspot-label");
    var thisLabelState = thisLabel.css("display");
    $(".lg-hotspot-label").fadeOut(0).parent().css("z-index", "0");
    $(".active-content"+index).parent().css("z-index", "9999999");
    if (thisLabelState == "none") {
      thisLabel.fadeIn(0);
      $(".active-content").parent().css("z-index", "999");
    }
  }
  goBack(){
    this.loc.back();
  }
}