import { Component, Input, AfterViewInit, ContentChild, TemplateRef } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { StyleLoaderService } from '../../library/style-loader.service';

export type DockModes = "circle" | "plus";

@Component({
  selector: 'rd-dock',
  template: `
    <div class="cn-container" [ngClass]="{'cn-container-circle': mode == 'circle'}">
      <button class="cn-button-circle" id="cn-button" *ngIf="mode == 'circle'">Menu</button>
      <button class="cn-button-plus" id="cn-button" *ngIf="mode == 'plus'">+</button>
      <div [ngClass]="{'cn-wrapper-circle': mode == 'circle', 'cn-wrapper-plus': mode == 'plus'}" id="cn-wrapper">
        <ul>         
          <ng-container *ngTemplateOutlet="template"></ng-container>
        </ul>
      </div>
      <div id="cn-overlay" class="cn-overlay" *ngIf="overlayActive"></div>
    </div>
  `
})
export class Dock extends RdComponent implements AfterViewInit {
  constructor(style: StyleLoaderService) {
    super();
    style.load(["./assets/css/dock.css"]);
  }

  @Input("rd-mode") mode: DockModes = "circle";
  @Input("rd-overlay-active") overlayActive = true;
  @ContentChild(TemplateRef) template;

  button;
  wrapper;
  overlay;
  isOpen: boolean = false;

  ngAfterViewInit() {
    this.button = document.getElementById('cn-button');
    this.wrapper = document.getElementById('cn-wrapper');
    this.overlay = document.getElementById('cn-overlay');

    this.button.addEventListener('click', this.mode == "circle" ? this.cHandler : this.pHandler, false);
    this.wrapper.addEventListener('click', (e) => { e.stopPropagation() }, false);
  }

  cHandler = function (e) {
    e.stopPropagation();
    if (!this.isOpen) {
      this.button.innerHTML = "Close";
      this.open();
    }
    else {
      this.button.innerHTML = "Menu";
      this.close();
    }
    document.addEventListener('click', function () {
      this.button.innerHTML = "Menu";
      this.close();
    }.bind(this));

  }.bind(this);

  pHandler = function (e) {
    let that = this;
    function openNav() {
      that.button.innerHTML = "-";
      that.open();
    }

    function closeNav() {
      that.button.innerHTML = "+";
      that.close();
    }

    if (!e) var e: any = window.event;
    e.stopPropagation(); //so that it doesn't trigger click event on document

    if (!this.isOpen) openNav();
    else closeNav();

    document.addEventListener('click', closeNav);
  }.bind(this);

  open() {
    this.isOpen = true;
    if (this.overlayActive) this.jQuery(this.overlay).addClass('on-overlay');
    this.jQuery(this.wrapper).addClass('opened-nav');
  }

  close() {
    this.isOpen = false;
    if (this.overlayActive) this.jQuery(this.overlay).removeClass('on-overlay');
    this.jQuery(this.wrapper).removeClass('opened-nav');
  }
}