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

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

export class AlphaNumericMask implements OnInit, OnDestroy {

  @Input('alphaNumericMask')
  private options: AlphaNumericMaskOptions;

  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\u0660-\u0669]|[0-9a-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);
  }
}