import debounce from './utils/debouncer.js';

const DEFAULT_EVENT_NAME = 'veeValidate';

const hasFieldDependency = (rules) => {
    const results = rules.split('|').filter(r => !! r.match(/confirmed|after|before/));
    if (! results.length) {
        return false;
    }

    return results[0].split(':')[1];
};

export default (options) => ({
    onInput() {
        this.vm.$validator.validate(this.fieldName, this.el.value);
    },
    onFileInput() {
        if (! this.vm.$validator.validate(this.fieldName, this.el.files)
        && this.modifiers.reject) {
            this.el.value = '';
        }
    },
    attachValidatorEvent() {
        this.validateCallback = this.expression ? () => {
            this.vm.$validator.validate(this.fieldName, this.value);
        } : () => {
            this.handler();
        };

        this.vm.$on(DEFAULT_EVENT_NAME, this.validateCallback);
    },
    bind() {
        this.vm.$nextTick(() => {
            this.fieldName = this.expression || this.el.name;
            this.vm.$validator.attach(this.fieldName, this.el.dataset.rules, this.el.dataset.as);

            if (this.expression) {
                this.attachValidatorEvent();

                return;
            }

            const handler = this.el.type === 'file' ? this.onFileInput : this.onInput;
            this.handles = this.el.type === 'file' ? 'change' : 'input';

            const delay = this.el.dataset.delay || options.delay;
            this.handler = delay ? debounce(handler.bind(this), delay) : handler.bind(this);
            this.el.addEventListener(this.handles, this.handler);

            this.attachValidatorEvent();
            const fieldName = hasFieldDependency(this.el.dataset.rules);
            if (this.el.dataset.rules && fieldName) {
                this.vm.$once('validatorReady', () => {
                    document.querySelector(`input[name='${fieldName}']`)
                            .addEventListener('input', this.handler);
                });
            }
        });
    },
    update(value) {
        if (! this.expression) {
            return;
        }

        if (this.modifiers.initial) {
            this.modifiers.initial = false;

            return;
        }

        // might be not ready yet.
        if (! this.fieldName) {
            this.vm.$nextTick(() => {
                this.vm.$validator.validate(this.fieldName, value);
            });

            return;
        }

        this.vm.$validator.validate(this.fieldName, value);
    },
    unbind() {
        if (this.handler) {
            this.el.removeEventListener(this.handles, this.handler);
        }

        this.vm.$validator.detach(this.fieldName);
        this.vm.$off(DEFAULT_EVENT_NAME, this.validateCallback);
    }
});

@@ -756,16 +756,19 @@
 e, this.
+el.
 value);%0A
@@ -887,24 +887,365 @@
 eCallback);%0A
+        const fieldName = hasFieldDependency(this.el.dataset.rules);%0A        if (this.el.dataset.rules && fieldName) %7B%0A            this.vm.$once('validatorReady', () =%3E %7B%0A                document.querySelector(%60input%5Bname='$%7BfieldName%7D'%5D%60)%0A                        .addEventListener('input', this.validateCallback);%0A            %7D);%0A        %7D%0A
     %7D,%0A    b
@@ -1999,368 +1999,8 @@
 ();%0A
-            const fieldName = hasFieldDependency(this.el.dataset.rules);%0A            if (this.el.dataset.rules && fieldName) %7B%0A                this.vm.$once('validatorReady', () =%3E %7B%0A                    document.querySelector(%60input%5Bname='$%7BfieldName%7D'%5D%60)%0A                            .addEventListener('input', this.handler);%0A                %7D);%0A            %7D%0A
     

fix confirmed, after and before dependency issues when being bound to