import { Ut } from "../../utils/Ut";
import { El } from "../../utils/dom";

export class Cancelable {

    /**
    * Cancelable, Construct
    */
    constructor(target, events) {

        let that = this;

        this.target = target;

        events = events || {};

        target.dxData('cancelable', this);

        this.iconHandler = El('i', { className: 'icon-right icon-clear hide' });

        let elType = target.tagName.toLowerCase();

        if (elType == 'select' || (elType == 'input' && target.type == 'text')) {
            
            let val = this.target.dxVal();

            let emptyVal = '';

            if (elType == 'select' && target.dxFind('option[value="0"]')) {
                emptyVal = '0';
            }

            this.iconHandler.classList.toggle('hide', val == emptyVal);
            
            target.after(this.iconHandler);

            target.dxOn(elType == 'input' ? 'input.cancelable changed.cancelable' : 'change.cancelable', function() {
                that.iconHandler.classList.toggle('hide', this.dxVal() == emptyVal);
            });

            this.iconHandler.dxOn('click', function() {

                target.dxVal(emptyVal);

                if ('value' in that.target.dataset) {
                    that.target.dataset.value = '';
                }

                that.iconHandler.classList.add('hide');

                that.target.dxTrigger('clear');
                Ut.trigger(events.clear, that);
            });
        }
    }

    /**
    * Cancelble, Destroy
    */
    destroy() {
        
        this.target.dxOff('input.cancelable change.cancelable');
        this.target.dxRemoveData('cancelable');

        this.iconHandler.remove();
        
        return this.target;
    }
}