class InteractionElement {
  constructor(htmlId="",
              checkStatus=true,
              disabledBefore=true,
              disabledAfter=false,
              hideBefore=true,
              hideAfter=false) {
    this.htmlId = htmlId;
    this.element = (htmlId) => {this.element = document.getElementById(htmlId);}
    this.checkStatus = checkStatus;
    this.callbacks = {};
    this.disabledBefore = disabledBefore;
    this.disabledAfter = disabledAfter;
    this.hideBefore = hideBefore;
    this.hideAfter = hideAfter;
    this.element(this.htmlId);
  }

  setCallback(trigger, callback, bindThis, args=[]) {
    this.callbacks[trigger] = {
                                 "function": callback,
                                 "bindThis": bindThis,
                                 "args": args
                              };
  }

  bindThisToCallback(trigger) {
    let callback = this.callbacks[trigger];
    let boundedCallback = callback["function"].bind(callback.bindThis);
    return boundedCallback;
  }
}

class InteractionElements {
  constructor() {
    this.interactions = [];
  }

  addInteractions (interactionsArray) {
    this.interactions.push(...interactionsArray);
  }

  onChangeExecute() {
    // checks if a change for every interactionElement happens and executes
    // the callbacks accordingly
    for (let interaction of this.interactions) {
      if (interaction.checkStatus) {
        interaction.element.addEventListener("change", (event) => {
          if (event.target.checked) {
            let f_on = interaction.bindThisToCallback("on");
            let args_on = interaction.callbacks.on.args;
            f_on(...args_on);
          } else if (!event.target.checked){
            let f_off = interaction.bindThisToCallback("off");
            let args_off = interaction.callbacks.off.args;
            f_off(...args_off);
          }
        });
      } else {
        continue
      }
    };
  }
}