import { Subject } from 'rxjs/Subject';
import { Store } from '@ngrx/store';
import { Component, OnInit, OnDestroy, AfterViewInit } from '@angular/core';

import { AppState } from '../../../root.reducer';

@Component({
    selector: 'my-map-example',
    template: `
              <sebm-google-map
                [fitContents]="fitContents"
                #bounds=fitContentsDirective
                [fitBounds]="bounds.mapBounds">
                <sebm-google-map-marker
                    *ngFor="let marker of fitContents | async"
                    [latitude]="marker.latitude"
                    [longitude]="marker.longitude">
                </sebm-google-map-marker>
            </sebm-google-map>
  `
})
export class ExampleComponent implements OnInit, OnDestroy {
    public fitContents: Subject<Coordinates[]> = new Subject<Coordinates[]>();

    private destroyed$: Subject<any> = new Subject();

    constructor(
        private store: Store<AppState>) { }

    public ngOnInit() {
        this.store.select(store => store.coordinatesToDisplay)
            .subscribe((coordinates) => {
                this.fitContents.next(coordinates);
            });
    }

    public ngOnDestroy() {
        this.destroyed$.next();
    }
}