import { Component, ViewChild, OnInit,
    ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'
import { ActivatedRoute } from '@angular/router'

import { InfoComponent } from '../info/info.component'
import { GisafMapboxComponent } from './gisaf-mapbox/gisaf-mapbox.component'
import { MapControlService } from './map-control.service'
import { MapDataService } from './map-data.service'


@Component({
    selector: 'gisaf-map',
    templateUrl: './map.component.html',
    styleUrls: ['./map.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        MapControlService,
        MapDataService,
    ],
})
export class MapComponent implements OnInit {
    @ViewChild('controlsDrawer', { static: true }) controlsDrawer: any
    @ViewChild(InfoComponent, { static: true }) infoComponent: InfoComponent
    @ViewChild(GisafMapboxComponent, { static: true }) mapComponent: GisafMapboxComponent

    constructor(
        public mapControlService: MapControlService,
        public mapDataService: MapDataService,
        private cdr: ChangeDetectorRef,
        private activatedRoute: ActivatedRoute
    ) {}

    ngOnInit() {
        this.mapControlService.hasControls$.subscribe(
            flag => {
                this.controlsDrawer.toggle(flag).then(
                    res => this.mapControlService.resize()
                )
                this.cdr.markForCheck()
            }
        )
    }
}
