import {
    Component,
    OnInit,
    HostListener,
} from '@angular/core';
import { Observable} from 'rxjs';
import { GridService } from './services/grid.service';
import { IObject } from '../../../../model/src/model/object';
import {
    GetObjects,
} from '../objects/object.actions';
import { Store } from '@ngrx/store';
import { IStoreState } from '../reducers';
import { objectSelectors } from '../reducers/objects.actions';

@Component({
    selector: 'app-calendar',
    templateUrl: './calendar.component.html',
    styleUrls: ['./calendar.component.styl'],
    providers: [GridService],
})
export class CalendarComponent implements OnInit {
    private objects$: Observable<IObject[]>;

    constructor(
        private gridService: GridService,
        private store: Store<IStoreState>
    ) {}

    ngOnInit() {
        this.store.dispatch(new GetObjects(/*..query..*/));
        this.objects$ = this.store.select(objectSelectors.selectAll);
    }

    @HostListener('mousedown', ['$event'])
    onMouseDown(e: MouseEvent) {
        this.gridService.onMouseDown(e);
    }

    @HostListener('mousemove', ['$event'])
    onMouseMove(e: MouseEvent) {
        this.gridService.onMouseMove(e);
    }

    @HostListener('mouseup', ['$event'])
    onMouseUp(e: MouseEvent) {
        this.gridService.onMouseUp(e);
    }
}