// Angular
import { Injectable } from '@angular/core';

// Rxjs
import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

// State
import { Browser, Device, Size } from '../entities/device-configs.model';
import { getUserBrowser } from '../services/device-configs.service';

@Injectable({ providedIn: 'root' })
export class DeviceConfigsFacade {
  private readonly deviceSubject = new BehaviorSubject<Device>('DESKTOP');
  private readonly sizeSubject = new BehaviorSubject<Size | null>(null);
  private readonly browserSubject = new BehaviorSubject<Browser>('UNKNOWN');

  // Device
  readonly device$: Observable<Device> = this.deviceSubject.asObservable();
  // `null` hasta que se resuelve el tamaño (así lo declara el estado inicial)
  readonly size$: Observable<Size | null> = this.sizeSubject.asObservable();
  readonly isSmallDevice$: Observable<boolean> = combineLatest([
    this.device$,
    this.size$,
  ]).pipe(map(([device, size]) => device !== 'DESKTOP' && size !== 'LARGE'));

  // Browser
  readonly browser$: Observable<Browser> = this.browserSubject.asObservable();

  getBrowser(): void {
    this.browserSubject.next(getUserBrowser());
  }

  setDevice(device: Device): void {
    this.deviceSubject.next(device);
  }

  setSize(size: Size): void {
    this.sizeSubject.next(size);
  }
}