import { Directive, ElementRef, Input, Output, Renderer, OnInit, OnDestroy } from '@angular/core';
import { NgModel } from '@angular/forms'
import { Mediator } from '../services/mediator';
import { CoreMediatorChannels } from '../utils/mediator-channels';;
import { AlphabeticMaskOptions } from '../types/input-masks-types';

@Directive({
  selector: '[alphabeticMask]'
})

export class AlphabeticMask implements OnInit, OnDestroy {

  @Input('alphabeticMask')
  private options: AlphabeticMaskOptions;

  private beforeCloseEventListenerKey: string;

  constructor(private el: ElementRef, private renderer: Renderer, private ngModel: NgModel) {
  }

  ngOnInit() {

    let innerInput: any = $(this.el.nativeElement).find("input").get(0);

    $(innerInput).focus(() => {
      $(innerInput).inputmask({
        mask: "x",
        repeat: this.options.length,
        definitions: {
          "x": {
            validator: "^([\u0621-\u064A]|[a-zA-Z])+$"
          }
        }
      });
    });

    $(innerInput).focusout(() => {
      this.ngModel.viewToModelUpdate(innerInput.inputmask.unmaskedvalue());
      innerInput.inputmask.remove();
    });

    this.beforeCloseEventListenerKey = Mediator.subscribe(CoreMediatorChannels.BEFORE_CLOSE_OBJECT_SCREEN, () => {
      $(innerInput).val(this.ngModel.value);
    });
  }

  ngOnDestroy() {
    Mediator.unsubscribe(CoreMediatorChannels.BEFORE_CLOSE_OBJECT_SCREEN, this.beforeCloseEventListenerKey);
  }

}