import { Component, ChangeDetectorRef  } from '@angular/core';
import { LocalStorage } from "../../core/services/local_storage.service"
import { HyperService } from '../../core/services/http.service';
import {Location} from '@angular/common';
 
declare var $:any;

@Component({
  selector: 'app-lauch-threesixty-comparison',
  templateUrl: './lauch-threesixty-comparison.component.html',
  styleUrls: ['./lauch-threesixty-comparison.component.scss']
})
export class LauchThreesixtyComparisonComponent  {
  drop_list_image:any=[];
  temp_item2:any=[]
  compare_title:any=[];
  compare_model_list:any=[];
  compare_list:any=[]
  compare_model_arr:any=[];
  droped_list:any=[];
  drag_id:number=0;
  main_model_name:string='';main_model_image:string='';
  loader:boolean=false;
  model_name:string;
  modelClick:any=[];
  constructor(private cdr: ChangeDetectorRef,private server: HyperService,private loc:Location) {
    // window.location.reload()
    this.model_name =  LocalStorage.getValue('model_name')
    this.getComparison()
    
   }
   drop(ev) {
    //  console.log("1")
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    $("#div2").css({"width":"0%","display":"none"});
   
  }
  goBack(){
    this.loc.back();
  }
  allowDrop(ev) {
    console.log("2")
     ev.preventDefault();
    $("#div2").css({"width":"34%","display":"block"});
  }
  drop1(ev) {
    console.log("3")
     ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    $("#div2").css({"width":"0%","display":"none"});
    for(let i=0;i<=this.compare_title.length;i++){
      $(".elements_"+i).addClass('hide');
    }
    // this.clickColapse(i);
    this.compare_model_arr[this.drag_id].model.value=false;
    this.droped_list.push(this.compare_model_arr[this.drag_id].category);
    this.drop_list_image.push(this.compare_model_arr[this.drag_id].model)
   }
   addCompareModel(index){
     this.drag_id=index;
     console.log(this.drag_id)
    console.log(this.droped_list.length)
    
    if(this.droped_list.length>2){
      alert("Maximum 3 models to compare")
    }else{
      this.compare_model_arr[this.drag_id].model.value=false;
      this.droped_list.push(this.compare_model_arr[this.drag_id].category);
      this.drop_list_image.push(this.compare_model_arr[this.drag_id].model)
    }
    console.log(this.droped_list,this.compare_title)
   }
  allowDrop1(ev) {
    console.log("1")
    ev.preventDefault();
 }
 
  drag(ev) {
    console.log("1")
     this.drag_id=ev.target.id;
     $("#div2").css({"width":"200px","display":"block"});
    ev.dataTransfer.setData("text", ev.target.id);
  }
   
  
  getComparison() {
    this.server.get("explore/comparison/"+LocalStorage.getValue('set_model_id'))
        .then((data) => {
            if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
                this.compare_list=data.result.data;
                this.main_model_name=this.compare_list.model.model_name;
                this.main_model_image=this.compare_list.model.model_image_url;
                this.compare_title=this.compare_list.category;
                this.compare_model_arr=this.compare_list.compare_model;
                this.compare_model_arr.forEach((element,index) => {
                  element.model.value=true;
                 });
           } else if (data.result.status == 401 && data.result.response == 'failed') {
             } else {
             }
        });
  }
  clickColapse(i){
     $(".elements_"+i).toggleClass('show');
  }
  removeDragItem(i,item){
    this.droped_list.splice(i,1)
    this.drop_list_image.splice(i,1);
    this.compare_model_arr.forEach((element,index) => {
      if(item==element.model.model_id){
       setTimeout(() => {
        element.model.value=true;
        }, 500);
      }
   });
  }
   
  




}
