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

// Ngrx
import { Store } from '@ngrx/store';

// Rxjs
import { Observable } from 'rxjs';

// State
import { Browser, Device, Size } from '../entities/device-configs.model';
import * as fromActions from '../state/device-configs.actions';
import * as fromState from '../state/device-configs.reducer';
import * as fromSelectors from '../state/device-configs.selectors';

@Injectable({ providedIn: 'root' })
export class DeviceConfigsFacade {
  // `inject()` en vez de parámetro de constructor: los inicializadores de
  // propiedad de abajo se evalúan antes que los parámetros del constructor.
  private readonly store = inject<Store<fromState.DeviceConfigsState>>(Store);

  // Device
  readonly device$: Observable<Device> = this.store.select(
    fromSelectors.getDevice,
  );
  // `null` hasta que se resuelve el tamaño (así lo declara el estado inicial)
  readonly size$: Observable<Size | null> = this.store.select(
    fromSelectors.getSize,
  );
  readonly isSmallDevice$: Observable<boolean> = this.store.select(
    fromSelectors.getIsSmallDevice,
  );

  // Browser
  readonly browser$: Observable<Browser> = this.store.select(
    fromSelectors.getBrowser,
  );

  getBrowser(): void {
    this.store.dispatch(fromActions.BrowserActions.getBrowser());
  }

  setDevice(device: Device): void {
    this.store.dispatch(fromActions.DeviceActions.saveDeviceType({ device }));
  }
}