import { Component, OnInit, NgZone, ViewChild, ElementRef } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { WebService } from '../../provider/web.service';
import { NgxCarousel } from 'ngx-carousel';
import { MapsAPILoader } from '@agm/core';
import { SubjectService } from '../../provider/subject.service';
import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms';
import { google } from '@google/maps';
import { ImageStorage } from '../../../environments/server.config';
import { formatDate } from '@angular/common';

declare var $;
declare const google: any;

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss']
})

export class IndexComponent implements OnInit {
  public featuredOn: NgxCarousel;
  public carouselTile: NgxCarousel;
  
  @ViewChild('wizardModal') wizardModalTrrigerInput;
  
  //Default Map Location
  
  lat: number = 51.678418;
  lng: number = 7.809007;
  
  wizardData: any;
  loginDetails: any;
  
  //Basic Location Search: TAB 1
  
  autocomplete: any;
  cfautocomplete: any;
  vehiYear:any;
  vehiBrand:any;
  vehiModel:any;
  carTrim:any;
  searchLocError: boolean;
  addresssearchLocError: boolean;
  @ViewChild("goTostep0") public goTostep0Ref: ElementRef;
  @ViewChild("goTostep1") public goTostep1Ref: ElementRef;
  @ViewChild("goTostep2") public goTostep2Ref: ElementRef;
  
  @ViewChild("closeWizard") public closeWizardRef: ElementRef;
  @ViewChild("googleLocSearch") public searchElementRef: ElementRef;
  @ViewChild("addressLocSearch") public addressElementRef: ElementRef;
  @ViewChild("indexLoginModal") loginModalRef: ElementRef;
  @ViewChild("closeQuoteWizard") closeQuoteWizardRef: ElementRef;
  @ViewChild('targetwrk') public targetEl: ElementRef;
  
  //Vehicle Details: TAB 2
  vehicleDataForm;
  vehicleDataFormSubmit;
  
  //Service Details: TAB 3
  loader: boolean;
  issuesData: any;
  defIssuesData: any[] = new Array();
  selectedIssues: any[] = new Array();
  monthArray: any[] = new Array(12);
  
  public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };
  
  //Quote Page
  step: number;
  today: any = new Date();
  currDate: any;
  currentDate: any;
  currentTime: any;
  nextDate: any;
  dateStep: number = 0;
  mechanics: string = ''; 
  dateSection: any[] = new Array();
  selMechanics: any[] = new Array();
  selectedElement: any = new Array();
  imageServer: string;
  mechanicData: any;
  autoSchedule: boolean;
  showLeftArrow: boolean;
  showRightArrow: boolean;
  estimatedPrice: number;
  scheduleDateInit: boolean;
  scheduleMechanic: any;
  
  carModel: any;
  carBrands: any;
  selBrand: string = '';
  modelDates: number[] = new Array();
  optionalImges: any = new Array({1:false,2:false,3:false,4:false});
  optionalDescription: string;
  
  constructor(
    private router        : Router, 
    public ngZone         : NgZone,
    public webService     : WebService,
    public mapsAPILoader  : MapsAPILoader,
    private route         : ActivatedRoute,
    public subjectService : SubjectService) { 
      this.step                  = 0;
      this.currDate              = new Date();
      this.nextDate              = new Date();
      this.issuesData            = false;
      this.imageServer           = ImageStorage;
      this.loginDetails          = false;
      this.autoSchedule          = false;
      this.showLeftArrow         = false;
      this.searchLocError        = false;
      this.showRightArrow        = true;
      this.scheduleDateInit      = false;
      this.scheduleMechanic      = false;
      this.optionalDescription   = '';
      this.vehicleDataFormSubmit = false;
      this.addresssearchLocError = false;

      this.route.params.subscribe(val => {
        this.route.queryParams.subscribe(params => {
          if(params['tab'] == '1'){
            setTimeout( () => {
              this.targetEl.nativeElement.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
              this.router.navigate(['.'],{relativeTo:this.route,queryParams:{}});
            },400);
          }
        })
      });
    }

    ngOnInit() {
      this.currentTime = this.today.getTime();
      this.currentDate = this.today.getDate();
      this.vehicleDataForm = new FormGroup({
        trim: new FormControl(''), milage: new FormControl(''), emgine: new FormControl(''),
        last_date: new FormControl(''), 
        maintanence_interval: new FormControl(''), 
        maker: new FormControl('', [Validators.required]), 
        modelYear: new FormControl('', [Validators.required]), 
        modelName: new FormControl('', [Validators.required])
      });

      this.getVehicleBrand();
      
      let currentYear = Number((new Date()).getFullYear());
      let startingYear = currentYear - 50;
      for (let date = currentYear ; date >= startingYear ; date --) {
        this.modelDates.push(date);
      }
      
      this.subjectService.getLoginData().subscribe(loginData => {
        this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
        
        if(this.loginDetails && this.autoSchedule){
          this.confirmBooking();
        }
      });
      
      this.mapsAPILoader.load().then(() => {
        this.autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
          types: ["address"]
        });
        this.cfautocomplete = new google.maps.places.Autocomplete(this.addressElementRef.nativeElement, {
          types: ["address"]
        });
      });
      
      this.featuredOn = {grid: {xs: 1, sm: 2 , md: 5, lg: 6, all: 0},slide: 1, speed: 400, animation: 'lazy',point: { visible: false },load: 2, touch: true, easing: 'ease'}
      this.carouselTile = {grid: {xs: 1, sm: 2 , md: 3, lg: 3, all: 0},slide: 1, speed: 400, animation: 'lazy',point: { visible: false },load: 2, touch: true, easing: 'ease'}
      this.nextDate.setDate(this.nextDate.getDate() + 1);
      
      $('.modal-backdrop').remove();
      $('body').attr('class','');
      $('body').attr('style','');
    }
    
    getVehicleBrand(){
      this.loader=true;
      this.webService.get_data('getVehicleBrand').subscribe(response => { 
        if(response.status == 'success'){
          this.carBrands = response.data;
        }
        this.loader = false;
      });
    }

    get_vehiYear(year){
      if(year == ''){
        return;
      }
      this.carTrim = this.carModel = [];
      this.vehiYear = year;
      if(this.vehiBrand){
        this.get_model(this.vehiBrand);
      }
    }

    get_model(brand_id) {
      this.vehiBrand = brand_id;
      if(!this.vehiYear){
        return false;
      }
      this.carTrim = this.carModel = [];
      this.loader = true;
      const thisObj = this;
      thisObj.carBrands.forEach(function (brandData,index) {
        if(brandData.veh_brand_id == brand_id){
          thisObj.selBrand = brandData.maker;
        }
      });

      this.webService.post_data('getVehicleModel',{'vehBrand_id':brand_id,'vehiYear':this.vehiYear}).subscribe(response => { 
        if(response.status == 'success'){
          this.carModel = response.data;
        }
        this.loader = false;
      });
    }

    get_trims(model){
      this.loader = true;
      this.webService.post_data('getVehicleTrim',{'vehBrand_id':this.vehiBrand,'vehiYear':this.vehiYear,'vehiModel':model}).subscribe(response => { 
        if(response.status == 'success'){
          this.carTrim = response.data;
        }
        this.loader = false;
      });
    }
    
    getVehicleLoc(lastLoc){
      if(lastLoc == ''){
        this.searchLocError = true;
        return;
      }
      this.ngZone.run(() => {
        let place: google.maps.places.PlaceResult = this.autocomplete.getPlace();
        if (place == undefined || place == null || place === undefined || place === null || 
          place.geometry == undefined || place.geometry == null || place.geometry === undefined || place.geometry === null || 
          place.formatted_address == undefined || place.formatted_address == null || place.formatted_address === undefined || place.formatted_address === null) {
            this.searchLocError = true;
            return;
          }
          this.wizardData = {'pickup_data': 
          {'disp_loc':place.name,
          'pickup_loc':place.formatted_address,
          'pickup_lat':place.geometry.location.lat(),
          'pickup_lng':place.geometry.location.lng()
        }
      };
      
      this.searchLocError = false;
      this.lat = place.geometry.location.lat();
      this.lng = place.geometry.location.lng();
      this.wizardModalTrrigerInput.nativeElement.click();
      
      this.getIssueData();
    });
  }
  
  getVehicleData(vehicleData){
    if(this.vehicleDataForm.invalid){
      this.vehicleDataFormSubmit = true;
      return false;
    }
    this.wizardData['vechile_info'] = {'trim':vehicleData['trim'],
    'lastMaintanceDate':(vehicleData['last_date'])?(formatDate(vehicleData['last_date'],'MM/dd/yyyy','en')):'',
    'maker':this.selBrand,
    'milage':vehicleData['milage'],'emgine':vehicleData['emgine'],
    'modelName':vehicleData['modelName'],'modelYear':vehicleData['modelYear'],
    'maintanenceInterval':vehicleData['maintanence_interval']
  }                                
  this.vehicleDataFormSubmit = false;
}

maintnceSchule(){
  this.goToPage('dashboard',{"redrct_tab":"reminder"});
}

diagnseCde(){
  this.goToPage('dashboard',{"redrct_tab":"vehicle"});
}

goToPage(path,data=null){
  this.router.navigate([path],{queryParams:  data});
  document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
}

getIssueData(){
  const This = this;
  this.loader = true;
  this.webService.get_data('getGeneralIssues').subscribe(response => {
    if(response.status == '1'){
      this.issuesData = response.issue_data;
      this.defIssuesData = this.issuesData;
      this.loader = false;
    } else {
      this.loader = false;
      return false;
    }
  },error => {
    this.loader = false;
    return false;
  });
}

searchIssues(event){
  if(event.target.value == '' || event.target.value == 'undefined' || event.target.value == undefined || event.target.value == 'null' || event.target.value == null ){
    this.issuesData = this.defIssuesData;
  } else {
    const thisObj = this;
    let subCatArr: any;
    let data: any[] = new Array();
    let serRegExp = new RegExp(event.target.value,"gi");
    
    thisObj.defIssuesData.forEach(function (issues,index) {
      let issueCat = issues.issue;
      if(issueCat.search(serRegExp) != -1){
        data.push(thisObj.defIssuesData[index]);
      } else {
        subCatArr = issues.sub_categories;
        subCatArr.forEach(function (issues_cat) {
          let sub_issue_cat = issues_cat.issue_category;
          if(sub_issue_cat.search(serRegExp) != -1){
            data.push(thisObj.defIssuesData[index]);
          }
        });
      }
    });
    this.issuesData = (data.length > 0)?data:false;
  }
  
  setTimeout(()=>{
    this.selectedIssues.forEach(function (issues) {
      $('[id="issue_'+issues.issue_id+'_'+issues.sub_issue_id+'"]').prop('checked', true);
    });
  },500);
}
get_newlocaion(lastLoc){
  this.cfautocomplete.addListener("place_changed", () => {
    this.ngZone.run(() => {
      let places: google.maps.places.PlaceResult = this.cfautocomplete.getPlace();
      if (places == undefined || places == null || places === undefined || places === null || 
        places.geometry == undefined || places.geometry == null || places.geometry === undefined || places.geometry === null || 
        places.formatted_address == undefined || places.formatted_address == null || places.formatted_address === undefined || places.formatted_address === null) {
          this.addresssearchLocError = true;
          return;
        }
        this.wizardData['pickup_data'] = {
          'disp_loc':places.name,
          'pickup_loc':places.formatted_address,
          'pickup_lat':places.geometry.location.lat(),
          'pickup_lng':places.geometry.location.lng()
        };
        this.addresssearchLocError = false;
        this.lat = places.geometry.location.lat();
        this.lng = places.geometry.location.lng();
      });
    })
  }
  
  get_newdate(lastdate){
    this.wizardData['vechile_info']['lastMaintanceDate']=formatDate(lastdate,'MM/dd/yyyy','en');
  }
  
  get_newmilage(milage){
    this.wizardData['vechile_info']['milage']=milage;
  }
  
  get_newmaintanence_date(newdate){
    this.wizardData['vechile_info']['maintanenceInterval']=newdate.target.value;
  }
  
  setIssueSelected(event){
    let issue_id = event.target.attributes.issue_id.value;
    let sub_issue_id = event.target.attributes.sub_issue_id.value;
    
    const thisObj = this;
    let index = thisObj.selectedIssues.findIndex(x => x.sub_issue_id == sub_issue_id);
    if(index > -1){
      thisObj.selectedIssues.splice(index, 1);
    } else {
      thisObj.issuesData.forEach(function (issData) {
        if(issData.issue_id == issue_id){
          issData.sub_categories.forEach(function (subIssData) {
            if(subIssData.issue_cat_id == sub_issue_id){
              let issue = issData.issue, 
              issue_image = issData.issue_image,
              issue_category = subIssData.issue_category,
              issue_cat_image = subIssData.issue_cat_image,
              default_service_fee = subIssData.default_service_fee,
              default_description = subIssData.default_description;
              
              thisObj.selectedIssues.push({issue_id,sub_issue_id,issue,issue_image,issue_category,issue_cat_image,default_service_fee,default_description});
            }
          });
        }
      }); 
    }
    this.calculateEstimate();
  }
  
  calculateEstimate(){
    const thisObj = this;
    thisObj.estimatedPrice = 0;
    thisObj.selectedIssues.forEach(function (selIssues) {
      thisObj.estimatedPrice = thisObj.estimatedPrice + Number(selIssues.default_service_fee);
    });
  }
  
  removeSelectedItem(issue_id,sub_issue_id){
    let index = this.selectedIssues.findIndex(x => x.sub_issue_id == sub_issue_id);
    if(index > -1){
      this.selectedIssues.splice(index, 1);
      
      $('[id="issue_'+issue_id+'_'+sub_issue_id+'"]').prop('checked', false);
    }
    if(this.selectedIssues.length == 0){
      this.jumpToStep1();
    }
    this.calculateEstimate();
  }
  
  resetQuoteWizard(){
    this.jumpToStep0();
    this.searchElementRef.nativeElement.value = '';
    
    this.selectedIssues = [];
    
    this.vehicleDataForm.reset({
      trim: '', milage: '', emgine: '', maker: '', modelYear: '', modelName: ''
    });
    
    this.optionalImges[1] = false;
    this.optionalImges[2] = false;
    this.optionalImges[3] = false;
    this.optionalImges[4] = false;
    this.optionalDescription = '';
  }
  
  getQuote(){
    const thisObj = this;
    this.loader = true;
    
    let selSubIssues: any[] = new Array();
    thisObj.selectedIssues.forEach(function (selIssues) {
      selSubIssues.push(selIssues.sub_issue_id);
    });
    let searchData = {'pickup_data':this.wizardData.pickup_data,'sub_issues':selSubIssues}
    this.webService.post_data('getNearByMechanics',searchData).subscribe(response => {
      if(response.status == '1'){
        this.mechanicData = response.mechanic_data;
        this.dateSection.push(new Date(this.today.setDate(this.today.getDate())));
        this.dateSection.push(new Date(this.today.setDate(this.today.getDate() + 1)));
        
        this.loader = false;
      } else {
        this.loader = false;
        return false;
      }
    },error => {
      this.loader = false;
      return false;
    });
  }
  
  onMouseOver(infoWindow, gm) {
    if (gm.lastOpen != null) {
      gm.lastOpen.close();
    }
    gm.lastOpen = infoWindow;
    infoWindow.open();
  }
  
  onMouseOut(gm){
    if (gm.lastOpen != null) {
      gm.lastOpen.close();
    }
  }
  
  next(event) {
    if(this.dateStep > 30){
      this.showLeftArrow = true;
      this.showRightArrow = false;
      return false;
    }
    this.showLeftArrow = true;
    this.showRightArrow = true;
    this.dateSection = new Array();
    this.nextDate.setDate(this.nextDate.getDate() + 1);
    this.currDate.setDate(this.currDate.getDate() + 1);
    this.dateSection[0] = new Date(this.currDate);
    this.dateSection[1] = new Date(this.nextDate);
    this.dateStep += 1;
  }
  
  prev(event) {
    if(this.dateStep <= 0){
      this.showLeftArrow = false;
      this.showRightArrow = true;
      return false;
    }
    this.showLeftArrow = true;
    this.showRightArrow = true;
    this.dateSection = new Array();
    this.nextDate.setDate(this.nextDate.getDate() - 1);
    this.currDate.setDate(this.currDate.getDate() - 1);
    this.dateSection[0] = new Date(this.currDate);
    this.dateSection[1] = new Date(this.nextDate);
    this.dateStep -= 1;
  }
  
  getSchedule(time,index){
    this.wizardData['schedule_date'] = {'date':this.formatDate(this.dateSection[index]),'time':time};
  }
  
  formatDate(date) {
    const d = new Date(date);
    let day = '' + d.getDate();
    let month = ''+(d.getMonth()+1);
    const year = d.getFullYear();
    if (day.length < 2) { day = '0'+day; }
    if (month.length < 2) { month = '0'+month; }
    return [year,month,day].join('-');
  }
  
  scheduleNow(mechanic_id,cost){
    this.wizardData['mechanic_id'] = mechanic_id+':'+cost;
    
    if(!this.loginDetails){
      this.autoSchedule = true;
      this.loginModalRef.nativeElement.click();
      return false;
    }
    this.loader = true;
    
    this.wizardData['cost'] = cost;
    this.confirmBooking();
  }
  
  scheduleMultipleRequest(){
    if(!this.loginDetails){
      this.autoSchedule = true;
      this.loginModalRef.nativeElement.click();
      return false;
    }
    let coma = '';
    const thisObj = this;
    this.mechanics = '';
    this.selMechanics.forEach(function (mechanic_data) {
      thisObj.mechanics += coma+mechanic_data.mechanic_id+':'+mechanic_data.amount; 
      coma = ',';
    })       
    this.wizardData['mechanic_id'] = thisObj.mechanics;
    this.wizardData['cost'] = this.estimatedPrice;
    this.wizardData['multiple'] ='1';
    this.confirmBooking();
  }
  
  confirmBooking(){
    this.wizardData['customer_id'] = this.loginDetails.customer_id;
    this.wizardData['selected_issues'] = this.selectedIssues;
    this.wizardData['optionalDescription'] = this.optionalDescription;
    
    let formData: FormData = new FormData();
    formData.append('data', JSON.stringify(this.wizardData));
    
    this.optionalImges.forEach(function (imgData,index) {
      if(!imgData){
        return true;
      }
      formData.append("optFile_" + (index), imgData.file);
    });
    
    this.webService.multipart_post('scheduleNow', formData).subscribe(response => {
      // this.webService.post_data('scheduleNow',this.wizardData).subscribe(response => {
      if(response.status == '1'){
        this.closeWizardRef.nativeElement.click();
        this.closeQuoteWizardRef.nativeElement.click();
        this.router.navigate(['../dashboard'],{queryParams: {tab: 'appointment'}});
      } else {
        this.loader = false;
        return false;
      }
    },error => {
      this.loader = false;
      return false;
    });
  }
  
  jumpToStep0(){
    this.goTostep0Ref.nativeElement.click();
  }
  
  jumpToStep1(){
    if(!this.vehicleDataForm.invalid){
      this.goTostep1Ref.nativeElement.click();
    }
  }
  
  jumpToStep2(){
    if(this.selectedIssues.length > 0){
      this.goTostep2Ref.nativeElement.click();
    }
  }
  
  optImgUpload(image_id,event){
    let reader = new FileReader();
    let optionalImg: any = event.target.files[0];
    
    reader.onloadend = () => {
      switch (image_id){
        case 1:
        this.optionalImges[1] = {'file':event.target.files[0],'file_url':reader.result};
        break;
        case 2:
        this.optionalImges[2] = {'file':event.target.files[0],'file_url':reader.result};
        break;
        case 3:
        this.optionalImges[3] = {'file':event.target.files[0],'file_url':reader.result};
        break;
        case 4:
        this.optionalImges[4] = {'file':event.target.files[0],'file_url':reader.result};
        break;
      }
    }
    reader.readAsDataURL(optionalImg);
  }
  
  checkboxChange(index,mechanic_id,event,estimate){
    if (event.target.checked) {
      this.selMechanics.push({id:index,mechanic_id:mechanic_id,amount:estimate});
    } else {
      let id = this.selMechanics.findIndex(x => x.id == index);
      if (id != -1) {
        this.selMechanics.splice(id, 1);
      }
    }
  }
  
  scrollToBottom(id){
    $('#'+id).stop().animate({scrollTop: $('#'+id)[0].scrollHeight}, 1500);
  }
  
  scrollToTop(id){
    $('#'+id).stop().animate({scrollTop: 0}, 800);
  }
  
  featuredOnLoad() {return ''; }
  carouselTileLoad(){ return ''; }
}