import { Component, Input, OnInit, ElementRef } from '@angular/core';

@Component({
  selector: 'ui-kit-button',
  templateUrl: 'button.component.html',
  styleUrls: ['../../../styles/css/button.css']
})
export class ButtonComponent implements OnInit {
  @Input() size: string = '';
  @Input() type: string = '';
  @Input() active: boolean = false;

  private el;
  private class;

  constructor(elementRef: ElementRef) { 
    this.el = elementRef.nativeElement;
  }

  toggle() {
    this.active = !this.active;
  }

  ngOnInit() {
    this.class = `ui-kit-button ${this.size} ${this.type}`;
    let body = document.querySelector('body');

    body.addEventListener('click', e => {
      if (!this.active || !e.target) { return; };
      if (this.el !== e.target && !this.el.contains((<any>e.target))) {
        this.active = false;
      }
    }, false);
  }
}