import { Directive, Input, ElementRef } from '@angular/core';
// tslint:disable-next-line:import-spacing

declare var $: any;

@Directive({
  // tslint:disable-next-line:directive-selector
  selector: '[jqueryValidate]'
})
export class JuqeryValidateDirective {

  @Input() jqueryValidate: any;

  constructor(private el: ElementRef) {
    System.import('jquery-validation/dist/jquery.validate.js').then(() => {
      const self = this;
      setTimeout(function () {
        self.addValidateMethod();
        self.attach();
      }, 100);
    })
  }

  // tslint:disable-next-line:one-line
  addValidateMethod() {
    $.validator.addMethod('mobile', function (value, element) {
      const length = value.length;
      const mobile = /^(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}$/;
      return this.optional(element) || (length === 11 && mobile.test(value));
    }, '请正确填写您的手机号码');

    $.validator.addMethod('personalName', function (value, element) {
      const name = /^([\u4e00-\u9fa5]+|([a-zA-Z]+\s?)+)$/g;
      return this.optional(element) || name.test(value);
    }, '姓名只能为中文或英文');

    // office号
    $.validator.addMethod('officeNumber', function (value, element) {
      const office = /^[a-zA-Z]{3}\d{3}$/g;
      return this.optional(element) || office.test(value);
    }, 'office号无效');

    // 正则表达式
    $.validator.addMethod('regular', function (value, element) {
      const regular = new RegExp(element.attributes['data-regular'].nodeValue);
      const r = this.optional(element) || regular.test(value);
      return r;
    }, '格式无效');

  }

  attach() {
    const self = this;
    const $form = $(this.el.nativeElement)
    const validateCommonOptions = {
      rules: {},
      messages: {},
      errorElement: 'em',
      errorClass: 'invalid',
      highlight: (element, errorClass, validClass) => {
        $(element).addClass(errorClass).removeClass(validClass);
        $(element).parent().addClass('state-error').removeClass('state-success');
      },
      unhighlight: (element, errorClass, validClass) => {
        $(element).removeClass(errorClass).addClass(validClass);
        $(element).parent().removeClass('state-error').addClass('state-success');
      },

      errorPlacement: (error, element) => {
        if (element.parent('.input-group').length) {
          error.insertAfter(element.parent());
        } else {
          error.insertAfter(element);
        }
      }
    };

    $form.find('[data-smart-validate-input], [smart-validate-input]').each(function () {
      const $input = $(this), fieldName = $input.attr('name');

      validateCommonOptions.rules[fieldName] = {};

      if ($input.data('required') !== undefined) {
        validateCommonOptions.rules[fieldName].required = true;
      }
      if ($input.data('email') !== undefined) {
        validateCommonOptions.rules[fieldName].email = true;
      }

      if ($input.data('maxlength') !== undefined) {
        validateCommonOptions.rules[fieldName].maxlength = $input.data('maxlength');
      }

      if ($input.data('minlength') !== undefined) {
        validateCommonOptions.rules[fieldName].minlength = $input.data('minlength');
      }
      if ($input.data('mobile') !== undefined) {
        validateCommonOptions.rules[fieldName].mobile = $input.data('mobile');
      }
      if ($input.data('personalname') !== undefined) {
        validateCommonOptions.rules[fieldName].personalname = $input.data('personalname');
      }
      if ($input.data('officenumber') !== undefined) {
        validateCommonOptions.rules[fieldName].officenumber = $input.data('officenumber');
      }
      if ($input.data('regular') !== undefined) {
        validateCommonOptions.rules[fieldName].regular = $input.data('regular');
      }

      if ($input.data('message')) {
        validateCommonOptions.messages[fieldName] = $input.data('message');
      } else {
        Object.keys($input.data()).forEach((key) => {
          if (key.search(/message/) === 0) {
            if (!validateCommonOptions.messages[fieldName]) {
              validateCommonOptions.messages[fieldName] = {};
            }

            const messageKey = key.toLowerCase().replace(/^message/, '')
            validateCommonOptions.messages[fieldName][messageKey] = $input.data(key);
          }
        });
      }
    });



    $form.validate($.extend(validateCommonOptions, this.jqueryValidate))
  }

}