import { Component, OnInit, Input, Output, EventEmitter, Directive, ElementRef, HostListener } from '@angular/core';
import { ButtonSettings } from './models/button-settingsl';
import { TranslatorService } from '../../services/translator/translator.service';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss'],
})
export class ButtonComponent implements OnInit {

  @Input() strong: boolean;
  @Input() class: any = '';
  @Input() icon: string;
  @Input() title: string;
  @Input() buttonClass: any = '';
  @Input() pClass: any = '';
  @Output() trigger = new EventEmitter();
  @Input() settings: ButtonSettings;
  public direction: string;
  public style: any;
  @Input() disabled = false;
  constructor(
    public ts: TranslatorService
  ) {
   
  }

  ngOnInit() {
    this.direction = TranslatorService.getCurrentLanguageName();
    if (this.settings) {
      this.style =
        {
          'border-top-left-radius': this.isEnabled(this.settings.topLeft),
          'border-top-right-radius': this.isEnabled(this.settings.topRight),
          'border-bottom-right-radius': this.isEnabled(this.settings.bottomRight),
          'border-bottom-left-radius': this.isEnabled(this.settings.bottomLeft)
        };
    }

    /*
    const element = document.getElementById('modal');
    element.addEventListener('click', e => {
      e.stopImmediatePropagation();
    });
    */
  }

  private isEnabled(enabled: boolean): string {
    return enabled ? '6px' : '0px';
  }
  public onClicked() {
    console.log(this.disabled);
     if (!this.disabled) {
      this.trigger.emit();
    }
  }


}

@Directive({ selector: '[modal]' })
export class Modal implements OnInit {

  constructor(private elRef: ElementRef) { }

  ngOnInit() {
    console.log(' on initialization');
    //this.elRef.nativeElement.addEventListener('mouseenter', this.onMouseEnter);
  }

  ngOnDestroy() {
    // this.elRef.nativeElement.removeEventListener('mouseenter', this.onMouseEnter);
  }

  onMouseEnter() {
    // alert("Don't touch my bacon!")
  }

  @HostListener('click', ['$event'])
  onClick(event: any) {
    // alert('click');
    // event.preventPropagation();
  }
}
