import { WidgetRouter, RouteConfig, IWidgetRouter, RouteResult } from 'widget-router';
import { ITemplateRenderer } from "./ITemplateRenderer";
import { DefaultTemplateRenderer } from "./DefaultTemplateRenderer";
import { EventHandlerManager } from "event-handler-manager";

export class WidgetFactory extends EventHandlerManager {
  
  private readonly containerId: string;
  private readonly routeConfig: RouteConfig;
  public router: IWidgetRouter;
  public templateRenderer: ITemplateRenderer;
  
  constructor(containerId: string, routeConfig: RouteConfig, templateRenderer?: ITemplateRenderer, router?: IWidgetRouter, renderAfterRoute?: boolean) {
    super();
    const currentContainer = <HTMLElement>document.querySelector(containerId);
    if (currentContainer === undefined || currentContainer === null) {
      throw new Error(containerId + ' was not found inside document, please set a valid container Id selector.');
    }
    let appScope = {};
    this.containerId = containerId;
    this.routeConfig = routeConfig;
    this.templateRenderer = templateRenderer ? templateRenderer : new DefaultTemplateRenderer(this.containerId, routeConfig.pageIdPrefix);
    this.router = router ? router : new WidgetRouter(this.containerId, this.routeConfig, appScope, this.templateRenderer);

    this.attach(['beforeroute', 'afterroute', 'beforestart', 'afterstart']);

    if (renderAfterRoute) {
      this.router.on('aftergo',
        (event, sender) => {
          sender.controllerHelper.render(sender.activePage, appScope[sender.activePage]);
        });  
    }

    this.router.on('beforego',
      () => {
        return this.trigger('beforeroute');
      });

    this.router.on('aftergo',
      () => {
        return this.trigger('afterroute');
      });
  }
  
  start(defaultPageName?: string, params?: any): Promise<RouteResult> {
    const dfd = new Promise<RouteResult>((resolve, reject) => {
      this.trigger('beforestart').then(() => {
        defaultPageName = defaultPageName !== undefined && defaultPageName !== null
          ? defaultPageName
          : this.routeConfig.routes[0].name;
        this.router.go(defaultPageName, params).then(routeResult => {
          this.trigger('afterstart').then(() => {
            resolve(routeResult);
          }).catch(err => {
            console.log(err);
            reject(err);
          });
        }).catch(err => {
          console.log(err);
          reject(err);
        });

      }).catch(err => {
        console.error(err);
        this.router.go(defaultPageName, params).then(routeResult => {
          this.trigger('afterstart').then(() => {
            resolve(routeResult);
          }).catch(err => {
            console.log(err);
            reject(err);
          });
        }).catch(err => {
          console.log(err);
          reject(err);
        });
      });
    });
    
    return dfd;
  }
}