
import { customElement, ViewSlot } from "aurelia-framework";
import { AppRouter } from "aurelia-router";
import { UIInternal } from "../../utils/ui-internal";
import { Config } from "../../config";
import * as Constants from "../../constants/constants";

@customElement("ui-viewport")
export class UIViewport {
  private dialogContainer;
  private taskbarContainer;
  private currentCSSBreakpoing: number;

  constructor(element: Element, private appConfig: Config, protected router: AppRouter) {
    element.addEventListener("resize", () => {
      this.detectSmallDevice();
      UIInternal.broadcast(UIInternal.EVT_VIEWPORT_RESIZE);
    });
    document.addEventListener("mouseup", $event => this.broadcastEvent($event));
    document.addEventListener("wheel", $event => this.broadcastWheelEvent($event));
  }

  protected attached(): void {
    this.detectSmallDevice();
    this.appConfig.containerConfig.DialogContainer = new ViewSlot(this.dialogContainer, true);
    this.appConfig.containerConfig.TaskbarContainer = new ViewSlot(this.taskbarContainer, true);

    this.appConfig.containerConfig.DialogContainer.attached();
    this.appConfig.containerConfig.TaskbarContainer.attached();
  }

  protected broadcastEvent($event: MouseEvent): void {
    if (!hasParent($event.target as HTMLElement, this.appConfig.containerConfig.FloatingContainer)) {
      UIInternal.broadcast(UIInternal.EVT_VIEWPORT_CLICK, $event.target);
    }
  }

  protected broadcastWheelEvent($event: WheelEvent): void {
    if (!hasParent($event.target as HTMLElement, this.appConfig.containerConfig.FloatingContainer)) {
      UIInternal.broadcast(UIInternal.EVT_VIEWPORT_WHEEL, $event.target);
    }
  }

  protected detectSmallDevice() {
    let windowWidth = window.outerWidth;

    if (windowWidth <= Constants.CSSBreakpoints.xs) {
      if (this.currentCSSBreakpoing != Constants.CSSBreakpoints.xs) {
        this.currentCSSBreakpoing = Constants.CSSBreakpoints.xs;
        UIInternal.broadcast(UIInternal.EVT_VIEWPORT_CSS_BREAKPOINT_CHANGE, this.currentCSSBreakpoing);
      }
    } else if (windowWidth <= Constants.CSSBreakpoints.sm) {
      if (this.currentCSSBreakpoing != Constants.CSSBreakpoints.sm) {
        this.currentCSSBreakpoing = Constants.CSSBreakpoints.sm;
        UIInternal.broadcast(UIInternal.EVT_VIEWPORT_CSS_BREAKPOINT_CHANGE, this.currentCSSBreakpoing);
      }
    } else if (windowWidth <= Constants.CSSBreakpoints.md) {
      if (this.currentCSSBreakpoing != Constants.CSSBreakpoints.md) {
        this.currentCSSBreakpoing = Constants.CSSBreakpoints.md;
        UIInternal.broadcast(UIInternal.EVT_VIEWPORT_CSS_BREAKPOINT_CHANGE, this.currentCSSBreakpoing);
      }
    } else if (windowWidth <= Constants.CSSBreakpoints.lg) {
      if (this.currentCSSBreakpoing != Constants.CSSBreakpoints.lg) {
        this.currentCSSBreakpoing = Constants.CSSBreakpoints.lg;
        UIInternal.broadcast(UIInternal.EVT_VIEWPORT_CSS_BREAKPOINT_CHANGE, this.currentCSSBreakpoing);
      }
    } else if (windowWidth <= Constants.CSSBreakpoints.xl) {
      if (this.currentCSSBreakpoing != Constants.CSSBreakpoints.xl) {
        this.currentCSSBreakpoing = Constants.CSSBreakpoints.xl;
        UIInternal.broadcast(UIInternal.EVT_VIEWPORT_CSS_BREAKPOINT_CHANGE, this.currentCSSBreakpoing);
      }
    } else {
      if (this.currentCSSBreakpoing != Constants.CSSBreakpoints.xxl) {
        this.currentCSSBreakpoing = Constants.CSSBreakpoints.xxl;
        UIInternal.broadcast(UIInternal.EVT_VIEWPORT_CSS_BREAKPOINT_CHANGE, this.currentCSSBreakpoing);
      }
    }

    if (this.appConfig.globalConfig.isAutomaticSmallDevice) {
      if (windowWidth < Constants.CSSBreakpoints.lg) {
        UIInternal.broadcast(UIInternal.EVT_VIEWPORT_SMALL_DEVICE_ACTIVATED);
        $('body').addClass('small-device');
      } else {
        $('body').removeClass('small-device');
      }
    }
  }
}
