/**
 * @file
 * Overriding core's message functions to add icon and a remove button to each message.
 */

((Drupal) => {
  /**
   * Overrides message theme function.
   *
   * @param {object} message
   *   The message object.
   * @param {string} message.text
   *   The message text.
   * @param {object} options
   *   The message context.
   * @param {string} options.type
   *   The message type.
   * @param {string} options.id
   *   ID of the message, for reference.
   *
   * @return {HTMLElement}
   *   A DOM Node.
   */
  Drupal.behaviors.tableTheming = {
    attach: function (context) {
      const tables = once('kern_ux_canvas_table', 'table.table', context);
      tables.forEach((table) => {
        table.classList.add('kern-table', 'kern-table--striped');
        const captions = once('kern-title', 'caption', table);
        captions.forEach((caption) => {
          caption.classList.add('kern-title');
        });
        const theads = once('kern-head', 'thead', table);
        theads.forEach((thead) => {
          thead.classList.add('kern-table__head');
        });
        const tbodys = once('kern-body', 'tbody', table);
        tbodys.forEach((tbody) => {
          tbody.classList.add('kern-table__body');
        });
        const tfoots = once('kern-foot', 'tfoot', table);
        tfoots.forEach((tfoot) => {
          tfoot.classList.add('kern-table__foot');
        });
        const trs = once('kern-row', 'tr', table);
        trs.forEach((tr) => {
          tr.classList.add('kern-table__row');
        });
        const ths = once('kern-header', 'th', table);
        ths.forEach((th) => {
          th.classList.add('kern-table__header');
        });
        const tds = once('kern-cell', 'td', table);
        tds.forEach((td) => {
          td.classList.add('kern-table__cell');
        })
      });
    }
  };
})(Drupal);
