import { Actions, createEffect, ofType } from '@ngrx/effects';

import * as RouterActions from './router.actions';

import { map, tap } from 'rxjs/operators';

import { Injectable } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';

@Injectable()
export class RouterEffects {
  navigateTo$ = createEffect(
    () => {
      return this.action$.pipe(
        ofType(RouterActions.navigateTo),
        map((action) => {
          return action.payload;
        }),
        tap(({ path, query: queryParams, extras }) => {
          this._router.navigate(path, { queryParams, ...extras });
        })
      );
    },
    { dispatch: false }
  );

  navigateRefreshTo$ = createEffect(
    () => {
      return this.action$.pipe(
        ofType(RouterActions.navigateRefreshTo),
        map((action) => {
          return action.payload;
        }),
        tap(({ path, query: queryParams, extras }) => {
          this._router.routeReuseStrategy.shouldReuseRoute = () => false;
          this._router.onSameUrlNavigation = 'reload';
          this._router.navigate(path, { queryParams, ...extras });
        })
      );
    },
    { dispatch: false }
  );

  navigateBack$ = createEffect(
    () => {
      return this.action$.pipe(
        ofType(RouterActions.navigateBack),
        tap(() => {
          this._location.back();
        })
      );
    },
    { dispatch: false }
  );

  navigateForward$ = createEffect(
    () => {
      return this.action$.pipe(
        ofType(RouterActions.navigateForward),
        tap(() => {
          this._location.forward();
        })
      );
    },
    { dispatch: false }
  );

  constructor(
    private _location: Location,
    private action$: Actions,
    private _router: Router
  ) {}
}