class NumericKeypad
{

    constructor(targetId, containerId) {
        this.targetId = targetId;
        this.containerId = containerId;
    }

    // Prefix #
    wrapTarget() {
        return "#" + this.targetId;
    }

    wrapContainer() {
        return "#" + this.containerId;
    }

    // On document.ready
    // Turn previous even bindings before make an even binding
    init() {
        //$(document).off("change", this.wrapTarget());
        $(document).on("change", this.wrapTarget(), function() {
            var contr = $(this).closest(".input-numeric-container");
            var input = contr.find(".input-numeric");
            var nonKeys = contr.find(".key-del, .key-clear");
            var inputValue = input.val();
                    
            if (inputValue == "") {
                nonKeys.prop("disabled", true);
            }
            else {
                nonKeys.prop("disabled", false);
            }
        });

        //$(document).off("click focus", this.wrapTarget());
        $(document).on("click focus", this.wrapTarget(), function() {
            var contr = $(this).closest(".input-numeric-container");
            var data = contr.attr("data-numeric");
        
            if (data) {
                if (data == "hidden") {
                    contr.find(".table-numeric").show();
                }
            }
        });
    
        // Key numeric
        $(document).off("click", `.key`);
        $(document).on("click", `.key`, function() {
            var contr = $(this).closest(".input-numeric-container");
            var input = contr.find(".input-numeric");
            var number = $(this).attr("data-key");
            var inputValue = input.val();
            
            input.val(inputValue + number).change();            
        });        
        
        // Delete
        $(document).off("click", `.key-del`);
        $(document).on("click", `.key-del`, function() {
            var contr = $(this).closest(".input-numeric-container");
            var input = contr.find(".input-numeric");
            var inputValue = input.val();
            
            input.val(inputValue.slice(0, -1)).change();            
        });
                
        // Clear
        $(document).off("click", `.key-clear`);
        $(document).on("click", `.key-clear`, function() {
            var contr = $(this).closest(".input-numeric-container");
            var input = contr.find(".input-numeric");
            input.val("").change();            
        });
    }
}