import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import {
  ProviderControllerService,
  ProviderModel
} from '../../../back-end/back-end-classes';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-top-bar',
  templateUrl: './top-bar.component.html',
  styleUrls: ['./top-bar.component.scss']
})
export class TopBarComponent implements OnInit, OnDestroy {
  options: ProviderModel[];
  currentRouteParams: Subscription = Subscription.EMPTY;
  isOpen: boolean;
  accommodation: 'hotel' | 'apartment' = 'apartment';
  transfer: 'rent' | 'public' = 'rent';
  //Today's Date
  defaultOutDate:Date = new Date();
  //Add one week to inboundDate
  defaultInDate:Date = new Date(new Date().setDate(new Date().getDate()+7));

  plannerOptions = {
    budget: '1000',
    originPlace: '',
    destinationPlace: '',
    outboundDate: this.defaultOutDate.toISOString().slice(0,10),
    inboundDate: this.defaultInDate.toISOString().slice(0,10),
    adults: 2,
    children: 0
  };

  constructor(
    private router: Router,
    private providerService: ProviderControllerService,
    private activeRoute: ActivatedRoute
  ) {}

  setOrigin = (origin: ProviderModel | string) => {
    if (typeof origin === 'string') {
      this.plannerOptions.originPlace = origin;
    } else {
      this.plannerOptions.originPlace = origin.iataCode;
    }
  };
  setDestinationPlace = (destination: ProviderModel | string) => {
    if (typeof destination === 'string') {
      this.plannerOptions.destinationPlace = destination;
    } else {
      this.plannerOptions.destinationPlace = destination.iataCode;
    }
  };
  setAccommodation = type => (this.accommodation = type);
  setTransfer = type => (this.transfer = type);
  clickSim(element, delay: number = 200) {
    setTimeout(
      () => element._element.nativeElement.children['0'].click(),
      delay
    );
  }
  getCities = async (): Promise<ProviderModel[]> => {
    try {
      return (await this.providerService.cities()).result;
    } catch (e) {
      console.log(e.message);
    }
  };

  async navigateToPlanner() {
    await this.router.navigate(
      [`/planner/${Object.values(this.plannerOptions).join('/')}`]);
  }

  async ngOnInit() {
    if (this.currentRouteParams !== Subscription.EMPTY){
      this.currentRouteParams.unsubscribe();
    }else{
      this.currentRouteParams = this.activeRoute.params.subscribe(params => {
        if (Object.keys(params).length !== 0){
          this.plannerOptions.budget = params.budget;
          this.plannerOptions.outboundDate = params.outboundDate;
          this.plannerOptions.inboundDate = params.inboundDate;
          this.plannerOptions.adults = params.adult;
          this.plannerOptions.children = params.children;
          this.setOrigin(params.originPlace);
          this.setDestinationPlace(params.destinationPlace);
        }
      });
    }


    // plannerOptions = {
    //   budget: this.activeRoute.snapshot.params.budget || '1000',
    //   originPlace: '',
    //   destinationPlace: '',
    //   outboundDate:
    //     this.activeRoute.snapshot.params.outboundDate || '2019-08-10',
    //   inboundDate: this.activeRoute.snapshot.params.inboundDate || '2019-08-17',
    //   adultsCount: this.activeRoute.snapshot.params.adults || 2,
    //   childrenCount: this.activeRoute.snapshot.params.children || 0
    // };

    this.getCities().then(result => (this.options = result));

    // if(Object.entries(this.activeRoute.snapshot.params).length){
    //
    // }
  }

  ngOnDestroy() {
    this.currentRouteParams.unsubscribe();
  }
}