export default {
  name: 'tableBorderRemover',
  display: 'command',
  title: 'Remove Table Border',
  buttonClass: 'border-button-styles',
  innerHTML: buttonIcon,
  add: function (core, targetElement) {
    const context = core.context;
    context.tableBorderRemover = {
      targetButton: targetElement,
    };
  },

  /**
   * @Override core
   */
  active: function (element) {
    if (!element) {
      this.util.removeClass(this.context.tableBorderRemover.targetButton, 'active');
    } else if (element.tagName.toLowerCase() === 'table') {
      if (this.util.hasClass(element, 'has-black-border')) {
        this.util.addClass(this.context.tableBorderRemover.targetButton, 'active');
      } else {
        this.util.removeClass(this.context.tableBorderRemover.targetButton, 'active');
      }
      return true;
    }
    return false;
  },

  /**
   * @Override core
   */
  action: function () {
    // Get the currently selected table element
    const selectedTable = this.util.getParentElement(this.getSelectionNode(), 'table');

    if (selectedTable) {
      // Check if the selected table has the 'has-black-border' class
      if (
        this.util.hasClass(selectedTable, 'has-black-border') ||
        this.util.hasClass(selectedTable, 'has-white-border')
      ) {
        if (this.util.hasClass(selectedTable, 'has-black-border')) {
          // Remove the 'has-black-border' class and add 'has-white-border' class
          this.util.removeClass(selectedTable, 'has-black-border');
          this.util.addClass(selectedTable, 'has-white-border');
        } else {
          // Remove the 'has-white-border' class and add 'has-black-border' class
          this.util.removeClass(selectedTable, 'has-white-border');
          this.util.addClass(selectedTable, 'has-black-border');
        }
      } else {
        this.util.addClass(selectedTable, 'has-white-border');
      }
    }
  },
};