import { Injectable, Inject } from '@angular/core';
import { SizeService } from './responsive.interfaces';
import { Observable, ReplaySubject } from 'rxjs';

type layout = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';

@Injectable()
export class ResponsiveService {
    get layout(): Observable<layout> {
        return this._layout.asObservable().distinctUntilChanged();
    }

    constructor( @Inject('SizeService') private size: SizeService) {
        size.size.subscribe(size => {
            this.width = size.width;
            this._layout.next(this.getLayout(size.width));
        });
    }

    getLayout(width: number): layout {
        switch (true) {
            case this.ltSmall():
                return 'xsmall';
            case this.ltMedium():
                return 'small';
            case this.ltLarge():
                return 'medium';
            case this.ltXLarge():
                return 'large';
            default:
                return 'xlarge';
        }
    }

    ltSmall(): boolean {
        return this.width < 600;
    }

    ltMedium(): boolean {
        return this.width < 960;
    }

    ltLarge(): boolean {
        return this.width < 1280;
    }

    ltXLarge(): boolean {
        return this.width < 1920;
    }

    private width: number = 960;
    private _layout: ReplaySubject<layout> = new ReplaySubject<layout>(1);
}