import { Component, ChangeDetectorRef, ElementRef } 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-launch-personalize',
  templateUrl: './launch-personalize.component.html',
  styleUrls: ['./launch-personalize.component.scss']
})
export class LaunchPersonalizeComponent {
  varient_list: any = [];
  color_list: any = [];
  image_url: string = '';
  is_selected: any = [];
  is_selected_color: any = [];
  loader: boolean = false;
  model_name: string;
  selectedId: any;
  selected_accessories: any;
  images: any = [];
  bikersData: any = [];
  ridersData:any=[];
  ridersDataCategory:any=[]
  activeSlide: number = 1;
  activeInSlide: number = 1;
  category_id:number;
  ridersImage:any=[];
  ridersPreviewImage:any=[];
  bikersPreviewImage:any=[]
  load_bike_preview:string='';
  vehicle_name;
  constructor(private server: HyperService, private loc: Location, private elementRef: ElementRef) {
   
  }
  ngOnInit() {
    $('#carousel-example').on('slide.bs.carousel', function (e) {
      console.log("here")
      var $e = $(e.relatedTarget);
      var idx = $e.index();
      var itemsPerSlide = 5;
      var totalItems = $('.carousel-item').length;
      console.log(totalItems.length)
      console.log(idx)
      if (idx >= totalItems - (itemsPerSlide - 1)) {

        var it = itemsPerSlide - (totalItems - idx);
        for (var i = 0; i < it; i++) {
          // append slides to end
          if (e.direction == "left") {
            $('.carousel-item').eq(i).appendTo('.carousel-inner');
          }
          else {
            $('.carousel-item').eq(0).appendTo('.carousel-inner');
          }
        }
      }
    });
    this.getPersonalise();
    // this.clickVarient(0);
    this.is_selected[0] = "selected";
    this.is_selected_color[0] = 'selected';
    this.model_name = LocalStorage.getValue('model_name')
    this.setTab('1')
    this.selected_accessories = 1;
    // this.activeSlide = 1;
    // this.activeInSlide =1;
  }

  getPersonalise() {
    this.loader = true;
    this.server.get("explore/variant/" + LocalStorage.getValue('set_model_id'))
      .then((data) => {
        if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
          this.loader = false;
          this.varient_list = data.result.data;
          this.clickVarient(0);
          this.vehicle_name = 0;
          console.log(this.vehicle_name)
        } else if (data.result.status == 401 && data.result.response == 'failed') {

        } else {
          this.loader = false;
          alert(data.result.message)
        }
      });
  }


  hitAnchor1(e) {
    console.log("Events", e);
    alert("You have clicked the anchor-1 tag");

  }
  hitAnchor2(e) {
    console.log("Events", e);
    alert("You have clicked the anchor-2 tag");
  }

  vehicleChange(e){
    console.log(e)
    this.clickVarient(e);
  }
  clickVarient(i) {
    // 
    setTimeout(() => {
      // for (let i = 0; i <= this.varient_list.length; i++) {
      //   this.is_selected[i] = ""
      // }
      this.is_selected[i] = "selected"
      this.color_list = this.varient_list[i].color;
      console.log(this.color_list)
      this.clickColor(0, this.color_list[0])
    }, 500)

  }
  clickColor(i, color) {
    for (let i = 0; i <= this.color_list.length; i++) {
      this.is_selected_color[i] = ""
    }
    this.is_selected_color[i] = "selected"
    this.image_url = color.image_url;
  }
  goBack() {
    this.loc.back();
  }
  setTab(id) {
    this.selectedId = id;
    if (this.selectedId == 2) {
      this.getBikersData()
    }

  }


  getBikersData() {
    this.server.get("explore/accessories_bikes/" + LocalStorage.getValue('set_model_id'))
      .then((data) => {
        console.log(data)
        if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
          this.bikersData = data.result.data.data;
          for (let i = 0; i < this.bikersData.length; i++) {
            this.activeSlide = this.bikersData[i].id
          }
          this.activeSlide = this.bikersData[0].id;
          console.log(this.activeSlide)
          this.loadPreview(this.bikersData[0])
        } else if (data.result.status == 401 && data.result.response == 'failed') {

        } else {
        }
      });
  }
  setInnerTab(id) {
    this.selected_accessories = id;
    if (this.selected_accessories == 1) {
      this.getBikersData()
     }else if (this.selected_accessories == 2) {
      this.getRidersData()
      this.category_id=1;
    }
  }
  getRidersData() {
    this.server.get("explore/accessories_riders")
    .then((data) => {
      console.log(data)
      if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
        this.ridersData = data.result.data.data;
        this.ridersDataCategory = data.result.data.category;
        this.selectCategory()
      } else if (data.result.status == 401 && data.result.response == 'failed') {

      } else {
      }
    });
  }

  selectCategory(){
    console.log(this.category_id)
    this.ridersImage=[];
    for (let i = 0; i < this.ridersData.length; i++) {
      if(this.ridersData[i].cat_id==this.category_id){
        
        let obj:any={};
        obj.image_url = this.ridersData[i].image_url;
        obj.id = this.ridersData[i].id;
        obj.title = this.ridersData[i].title;
        obj.price = this.ridersData[i].price;
        obj.description = this.ridersData[i].description;
        this.ridersImage.push(obj);
      }
      
    }
    console.log(this.ridersImage)
    for (let j = 0; j < this.ridersImage.length; j++) {
      this.activeSlide = this.ridersImage[j].id
    }
    this.activeInSlide = this.ridersImage[0].id;
    this.ridersPreview(this.ridersImage[0])
  }
  ridersPreview(item){
    console.log(item)
    this.ridersPreviewImage=[];
    for(let i=0;i<this.ridersImage.length;i++){
      if(this.ridersImage[i].id==item.id){
        let obj:any={};
        obj.image_url = this.ridersImage[i].image_url;
        obj.id = this.ridersImage[i].id;
        obj.title = this.ridersImage[i].title;
        obj.price = this.ridersImage[i].price;
        obj.description = this.ridersImage[i].description;
        this.ridersPreviewImage.push(obj);
      }
    }
    console.log(this.ridersPreviewImage)
  }
  loadPreview(bike){
    this.bikersPreviewImage=[];
  for(let i=0;i<this.bikersData.length;i++){
    if(this.bikersData[i].id==bike.id){
      let obj:any={};
      obj.image_url = this.bikersData[i].image_url;
        obj.id = this.bikersData[i].id;
        obj.title = this.bikersData[i].title;
        obj.price = this.bikersData[i].price;
        obj.description = this.bikersData[i].description;
        this.bikersPreviewImage.push(obj);
    }
  }
 }
}
