import { Component, Input, OnChanges }      from "@angular/core"
import { ActivatedRoute, Params, Router }   from '@angular/router'
import { Location }                         from '@angular/common'
import { isPlatformBrowser }                from '@angular/common'

import { Observable }                       from 'rxjs/Observable'
import { Subject }                          from 'rxjs/Subject'


import { GeolocationService }               from '../../../../services/svc.geolocation'
import { StorelocatorService }              from '../../../../services/svc.store-locator'
import { StudioService }                    from '../../../../services/svc.studios'
import { HelperService }                    from '../../../../services/svc.helper'

@Component({
    moduleId: module.id+ '',
    selector: 'storelocator-search',
    templateUrl: './tpl.search.pug',
    styleUrls: ['./sty.search.scss'],
    providers: [GeolocationService, StorelocatorService]
})

export class StorelocatorSearchComponent {


    // Subject to parse data into
    private locationSource = new Subject<Object>();

    // Define Observable
    location$ = this.locationSource.asObservable();

    @Input('content') content: any;

    // Local variables
    countries: any;
    filterState: boolean = true;
    filterValue: string = '';
    selectLocation: string = 'Select a location';
    isLoading: boolean = false;

    isCollection: boolean = false;

    studios: any;

    pure:boolean = true;

    constructor(
        private geolocationService: GeolocationService,
        private storelocatorService: StorelocatorService,
        private studioService: StudioService,
        private _helper: HelperService,
        private location: Location,
        private router: Router,
        private _route: ActivatedRoute
    ) { }

    server: string = this._helper.server;

    ngOnInit() {

        this._route.params.subscribe((params: any) => {

            if(params.categorykey)
                this.isCollection = true

            if(!!params.state || !!params.country || !!params.store) {
                this.pure = false;
            }
        })

        this.studioService.getStudios().then(response => {
            this.studios = response
        })

        this.storelocatorService.getCountries().then(response => {
            this.countries = response.countries
        });
        this.location$.subscribe(
            (result) => {
                this.openCoordinateStore(result)
            }
        );
    }

    toggleFilter() {
        if(this.filterState)
            this.filterState = false
        else
            this.filterState = true
    }

    closeFilter() {
        this.filterState = true;
    }

    findNearest(): void {
        if(isPlatformBrowser) {
            this.isLoading = true;

            this.geolocationService.getCurrentPosition().subscribe(
                (result) => {
                    this.locationSource.next(result)
                    this.isLoading = false;
                    this.pure = false;
                }
            );
        }
    }

    openCoordinateStore(coordinates: any) {
        let lat = coordinates.coords.latitude
        let lon = coordinates.coords.longitude

        this.storelocatorService.findNearest(lat, lon).then(response => {
            this.router.navigate(['/find-store/'+response.store.urlkey])
        })

    }

    openCountryStore(country: string) {
        this.filterValue = country;
        this.closeFilter();
        this.router.navigate(['/find-store/country/'+country])
    }

    openStateStore(country: string, state: string) {
        this.filterValue = state;
        this.closeFilter();
        this.router.navigate(['/find-store/country/'+country+'/'+state])
    }
}