import {
  Attribute,
  ChangeDetectorRef,
  ComponentFactoryResolver,
  Directive,
  Input,
  ViewContainerRef
} from '@angular/core';
import { ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET, RouterOutlet } from '@angular/router';
// insert correct location to the fallback view
import { PortalLangSelectView } from './portal-lang-select.view';

export enum CurrentPageType {
  NONE,
  MAIN,
  PORTAL
}

@Directive({ selector: 'i18n-router-outlet' })
export class I18nRouterOutletDirective extends RouterOutlet {
  private _lang = null;
  private _currentPage = CurrentPageType.NONE;

  constructor(
    private thisParentContexts: ChildrenOutletContexts,
    private thisLocation: ViewContainerRef,
    private thisResolver: ComponentFactoryResolver,
    @Attribute('name') private thisName: string,
    private thisChangeDetector: ChangeDetectorRef
  ) {
    super(thisParentContexts, thisLocation, thisResolver, thisName, thisChangeDetector);
    this.thisName = name || PRIMARY_OUTLET;
  }

  @Input()
  set lang(lang: string) {
    this._lang = lang || null;
    if (this._currentPage === CurrentPageType.PORTAL) {
      const context = this.thisParentContexts.getContext(this.thisName);
      this.thisLocation.clear();
      this.activateWith(context.route, context.resolver || null);
    }
  }

  activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver | null): void {
    if (this._lang !== null) {
      this._currentPage = CurrentPageType.MAIN;
      super.activateWith(activatedRoute, resolver);
    } else if (this._currentPage === CurrentPageType.NONE) {
      this._currentPage = CurrentPageType.PORTAL;
      resolver = resolver || this.thisResolver;
      const factory = resolver.resolveComponentFactory(PortalLangSelectView);
      const routeActivated = this.thisLocation.createComponent(factory, this.thisLocation.length);
      this.activateEvents.emit(routeActivated.instance);
    }
  }
}