/*
 *  Document   : template.js
 *  Author     : pixelcave
 *  Description: UI Framework custom functionality
 *
 */

// Imports
import * as bootstrap from "bootstrap";
import SimpleBar from "simplebar";
import Helpers from "./helpers.js";

// Assignments
window.bootstrap = bootstrap;
window.SimpleBar = SimpleBar;

// Template
export default class Template {
  /*
   * Auto called when creating a new instance
   *
   */
  constructor(options) {
    this.onLoad(() => this._uiInit(options));
  }

  /*
   * Init all vital functionality
   *
   */
  _uiInit(options) {
    // Layout variables
    this._lHtml = document.documentElement;
    this._lBody = document.body;
    this._lpageLoader = document.getElementById("page-loader");
    this._lPage = document.getElementById("page-container");
    this._lSidebar = document.getElementById("sidebar");
    this._lSidebarScrollCon =
      this._lSidebar && this._lSidebar.querySelector(".js-sidebar-scroll");
    this._lSideOverlay = document.getElementById("side-overlay");
    this._lResize = false;
    this._lHeader = document.getElementById("page-header");
    this._lHeaderSearch = document.getElementById("page-header-search");
    this._lHeaderSearchInput = document.getElementById(
      "page-header-search-input"
    );
    this._lHeaderLoader = document.getElementById("page-header-loader");
    this._lMain = document.getElementById("main-container");
    this._lFooter = document.getElementById("page-footer");

    // Helper variables
    this._darkMode = options?.darkMode || "system";
    this._lSidebarScroll = false;
    this._lSideOverlayScroll = false;

    // Base UI Init
    this._uiHandleTheme();
    this._uiHandleDarkMode();
    this._uiHandleSidebars();
    this._uiHandleHeader();
    this._uiHandleNav();

    // API Init
    this._uiApiLayout();
    this._uiApiBlocks();

    // Init the following helpers by default
    this.helpers([
      "bs-tooltip",
      "bs-popover",
      "dm-toggle-class",
      "dm-year-copy",
      "dm-ripple",
    ]);

    // Page Loader (hide it)
    this._uiHandlePageLoader();
  }

  /*
   * Handles sidebar and side overlay scrolling functionality/styles
   *
   */
  _uiHandleSidebars(mode = "init") {
    let self = this;

    if (self._lSidebar || self._lSideOverlay) {
      if (mode === "init") {
        // Add 'side-trans-enabled' class to #page-container (enables sidebar and side overlay transition on open/close)
        // Fixes IE10, IE11 and Edge bug in which animation was executed on each page load
        self._lPage.classList.add("side-trans-enabled");

        // Remove side transitions on window resizing
        window.addEventListener("resize", () => {
          clearTimeout(self._lResize);

          self._lPage.classList.remove("side-trans-enabled");

          self._lResize = setTimeout(() => {
            self._lPage.classList.add("side-trans-enabled");
          }, 500);
        });

        // Init custom scrolling
        this._uiHandleSidebars("custom-scroll");
      } else if ((mode = "custom-scroll")) {
        // If .side-scroll is added to #page-container, enable custom scrolling
        if (self._lPage.classList.contains("side-scroll")) {
          // Init custom scrolling on Sidebar
          if (self._lSidebar && !self._lSidebarScroll) {
            self._lSidebarScroll = new SimpleBar(self._lSidebarScrollCon);
          }

          // Init custom scrolling on Side Overlay
          if (self._lSideOverlay && !self._lSideOverlayScroll) {
            self._lSideOverlayScroll = new SimpleBar(self._lSideOverlay);
          }
        }
      }
    }
  }

  /*
   * Handles header related classes
   *
   */
  _uiHandleHeader() {
    let self = this;

    // If the header is fixed and has the glass style, add the related class on scrolling to add a background color to the header
    if (
      self._lPage.classList.contains("page-header-glass") &&
      self._lPage.classList.contains("page-header-fixed")
    ) {
      window.addEventListener("scroll", (e) => {
        if (window.scrollY > 60) {
          self._lPage.classList.add("page-header-scroll");
        } else {
          self._lPage.classList.remove("page-header-scroll");
        }
      });

      window.dispatchEvent(new CustomEvent("scroll"));
    }
  }

  /*
   * Toggle Submenu functionality
   *
   */
  _uiHandleNav() {
    let links = document.querySelectorAll('[data-toggle="submenu"]');

    // When a submenu link is clicked
    if (links) {
      links.forEach((link) => {
        link.addEventListener("click", (e) => {
          e.preventDefault();

          // Get main navigation
          let mainNav = link.closest(".nav-main");

          // Check if we are in horizontal navigation, large screen and hover is enabled
          if (
            !(
              (window.innerWidth ||
                document.documentElement.clientWidth ||
                document.body.clientWidth) > 991 &&
              mainNav.classList.contains("nav-main-horizontal") &&
              mainNav.classList.contains("nav-main-hover")
            )
          ) {
            // Get link's parent
            let parentLi = link.closest("li");

            if (parentLi.classList.contains("open")) {
              // If submenu is open, close it..
              parentLi.classList.remove("open");

              link.setAttribute("aria-expanded", "false");
            } else {
              // .. else if submenu is closed, close all other (same level) submenus first before open it
              Array.from(link.closest("ul").children).forEach((el) => {
                el.classList.remove("open");
              });

              parentLi.classList.add("open");

              link.setAttribute("aria-expanded", "true");
            }
          }

          return false;
        });
      });
    }
  }

  /*
   * Page loading screen functionality
   *
   */
  _uiHandlePageLoader(mode = "hide", colorClass) {
    if (mode === "show") {
      if (this._lpageLoader) {
        if (colorClass) {
          this._lpageLoader.className = "";
          this._lpageLoader.classList.add(colorClass);
        }

        this._lpageLoader.classList.add("show");
      } else {
        let pageLoader = document.createElement("div");

        pageLoader.id = "page-loader";

        if (colorClass) {
          pageLoader.classList.add(colorClass);
        }

        pageLoader.classList.add("show");

        this._lPage.insertBefore(pageLoader, this._lPage.firstChild);

        this._lpageLoader = document.getElementById("page-loader");
      }
    } else if (mode === "hide") {
      if (this._lpageLoader) {
        this._lpageLoader.classList.remove("show");
      }
    }
  }

  /*
   * Handles Dark Mode functionality
   *
   */
  _uiHandleDarkMode(mode) {
    let self = this;
    let rememberDarkMode = !self._lHtml.classList.contains(
      "dark-custom-defined"
    );

    // Get dark mode toggle buttons
    let btnLight = document.querySelector('[data-dark-mode="off"]');
    let btnDark = document.querySelector('[data-dark-mode="on"]');
    let btnSystem = document.querySelector('[data-dark-mode="system"]');

    // Get dark mode icon
    let darkModeIcon = document.querySelector("[data-dark-mode-icon]");

    // Set Dark Mode preference
    if (["on", "off", "system"].includes(mode)) {
      if (mode === "on") {
        self._lHtml.classList.add("dark");
        self._darkMode = "on";

        // Save dark mode preference
        if (rememberDarkMode) {
          localStorage.setItem("dashmixDarkMode", "on");
        }

        // Set active buttons
        btnLight?.classList.remove("active");
        btnDark?.classList.add("active");
        btnSystem?.classList.remove("active");

        // Set dark mode icon
        if (darkModeIcon) {
          darkModeIcon.className = "fa fa-fw fa-moon";
        }
      } else if (mode === "off") {
        self._lHtml.classList.remove("dark");
        self._darkMode = "off";

        // Save dark mode preference
        if (rememberDarkMode) {
          localStorage.setItem("dashmixDarkMode", "off");
        }

        // Set active buttons
        btnLight?.classList.add("active");
        btnDark?.classList.remove("active");
        btnSystem?.classList.remove("active");

        // Set dark mode icon
        if (darkModeIcon) {
          darkModeIcon.className = "far fa-fw fa-moon";
        }
      } else if (mode === "system") {
        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
          self._lHtml.classList.add("dark");

          // Set dark mode icon
          if (darkModeIcon) {
            darkModeIcon.className = "fa fa-fw fa-moon";
          }
        } else {
          self._lHtml.classList.remove("dark");

          // Set dark mode icon
          if (darkModeIcon) {
            darkModeIcon.className = "far fa-fw fa-moon";
          }
        }

        self._darkMode = "system";

        // Save dark mode preference
        if (rememberDarkMode) {
          localStorage.setItem("dashmixDarkMode", "system");
        }

        // Set active buttons
        btnLight?.classList.remove("active");
        btnDark?.classList.remove("active");
        btnSystem?.classList.add("active");
      }
    } else {
      // We are in init state
      let darkMode = "";

      // If the preference is saved before, else use the default
      if (rememberDarkMode) {
        darkMode = localStorage.getItem("dashmixDarkMode") || self._darkMode;
      } else {
        localStorage.removeItem("dashmixDarkMode");
        darkMode = self._darkMode;
      }

      // Set Dark Mode Preference
      if (darkMode === "on") {
        self._uiHandleDarkMode("on");
      } else if (darkMode === "off") {
        self._uiHandleDarkMode("off");
      } else if (darkMode === "system") {
        self._uiHandleDarkMode("system");
      }

      // If dark mode preference is changed on system, update it accordingly if dark mode is set to "system"
      window
        .matchMedia("(prefers-color-scheme: dark)")
        .addEventListener("change", () => {
          if (self._darkMode === "system") {
            self._uiHandleDarkMode("system");
          }
        });
    }
  }

  /*
   * Set active color theme functionality
   *
   */
  _uiHandleTheme() {
    let self = this;
    let themeEl = document.getElementById("css-theme");
    let rememberTheme = this._lHtml.classList.contains("remember-theme");

    // If remember theme is enabled
    if (rememberTheme) {
      let themeName = localStorage.getItem("dashmixColorTheme") || false;

      // Update color theme
      if (themeName) {
        self._uiUpdateTheme(themeEl, themeName);
      }

      // Update theme element
      themeEl = document.getElementById("css-theme");
    } else {
      localStorage.removeItem("dashmixColorTheme");
    }

    // Set the active color theme link as active
    document
      .querySelectorAll(
        '[data-toggle="theme"][data-theme="' +
          (themeEl ? themeEl.getAttribute("href") : "default") +
          '"]'
      )
      .forEach((link) => {
        link.classList.add("active");
      });

    // When a color theme link is clicked
    document.querySelectorAll('[data-toggle="theme"]').forEach((el) => {
      el.addEventListener("click", (e) => {
        e.preventDefault();

        // Get element's data
        let themeName = el.dataset.theme;

        // Set this color theme link as active
        document.querySelectorAll('[data-toggle="theme"]').forEach((link) => {
          link.classList.remove("active");
        });

        document
          .querySelector(
            '[data-toggle="theme"][data-theme="' + themeName + '"]'
          )
          .classList.add("active");

        // Update color theme
        self._uiUpdateTheme(themeEl, themeName);

        // Update theme element
        themeEl = document.getElementById("css-theme");

        // If remember theme is enabled, save the new active color theme
        if (rememberTheme) {
          localStorage.setItem("dashmixColorTheme", themeName);
        }
      });
    });
  }

  /*
   * Updates the color theme
   *
   */
  _uiUpdateTheme(themeEl, themeName) {
    if (themeName === "default") {
      if (themeEl) {
        themeEl.parentNode.removeChild(themeEl);
      }
    } else {
      if (themeEl) {
        themeEl.setAttribute("href", themeName);
      } else {
        let themeLink = document.createElement("link");

        themeLink.id = "css-theme";
        themeLink.setAttribute("rel", "stylesheet");
        themeLink.setAttribute("href", themeName);

        document
          .getElementById("css-main")
          .insertAdjacentElement("afterend", themeLink);
      }
    }
  }

  /*
   * Layout API
   *
   */
  _uiApiLayout(mode = "init") {
    let self = this;

    // API with object literals
    let layoutAPI = {
      init: () => {
        let buttons = document.querySelectorAll('[data-toggle="layout"]');

        // Call layout API on button click
        if (buttons) {
          buttons.forEach((btn) => {
            btn.addEventListener("click", (e) => {
              self._uiApiLayout(btn.dataset.action);
            });
          });
        }

        // Prepend Page Overlay div if enabled (used when Side Overlay opens)
        if (self._lPage.classList.contains("enable-page-overlay")) {
          let pageOverlay = document.createElement("div");
          pageOverlay.id = "page-overlay";

          self._lPage.insertBefore(pageOverlay, self._lPage.firstChild);

          document
            .getElementById("page-overlay")
            .addEventListener("click", (e) => {
              self._uiApiLayout("side_overlay_close");
            });
        }
      },
      sidebar_pos_toggle: () => {
        self._lPage.classList.toggle("sidebar-r");
      },
      sidebar_pos_left: () => {
        self._lPage.classList.remove("sidebar-r");
      },
      sidebar_pos_right: () => {
        self._lPage.classList.add("sidebar-r");
      },
      sidebar_toggle: () => {
        if (window.innerWidth > 991) {
          self._lPage.classList.toggle("sidebar-o");
        } else {
          self._lPage.classList.toggle("sidebar-o-xs");
        }
      },
      sidebar_open: () => {
        if (window.innerWidth > 991) {
          self._lPage.classList.add("sidebar-o");
        } else {
          self._lPage.classList.add("sidebar-o-xs");
        }
      },
      sidebar_close: () => {
        if (window.innerWidth > 991) {
          self._lPage.classList.remove("sidebar-o");
        } else {
          self._lPage.classList.remove("sidebar-o-xs");
        }
      },
      sidebar_mini_toggle: () => {
        if (window.innerWidth > 991) {
          self._lPage.classList.toggle("sidebar-mini");
        }
      },
      sidebar_mini_on: () => {
        if (window.innerWidth > 991) {
          self._lPage.classList.add("sidebar-mini");
        }
      },
      sidebar_mini_off: () => {
        if (window.innerWidth > 991) {
          self._lPage.classList.remove("sidebar-mini");
        }
      },
      sidebar_style_toggle: () => {
        if (self._lPage.classList.contains("sidebar-dark")) {
          self._uiApiLayout("sidebar_style_light");
        } else {
          self._uiApiLayout("sidebar_style_dark");
        }
      },
      sidebar_style_dark: () => {
        self._lPage.classList.add("sidebar-dark");
      },
      sidebar_style_light: () => {
        self._lPage.classList.remove("sidebar-dark");
      },
      side_overlay_toggle: () => {
        if (self._lPage.classList.contains("side-overlay-o")) {
          self._uiApiLayout("side_overlay_close");
        } else {
          self._uiApiLayout("side_overlay_open");
        }
      },
      side_overlay_open: () => {
        // When ESCAPE key is hit close the side overlay
        document.addEventListener("keydown", (e) => {
          if (e.key === "Esc" || e.key === "Escape") {
            self._uiApiLayout("side_overlay_close");
          }
        });

        self._lPage.classList.add("side-overlay-o");
      },
      side_overlay_close: () => {
        self._lPage.classList.remove("side-overlay-o");
      },
      side_overlay_mode_hover_toggle: () => {
        self._lPage.classList.toggle("side-overlay-hover");
      },
      side_overlay_mode_hover_on: () => {
        self._lPage.classList.add("side-overlay-hover");
      },
      side_overlay_mode_hover_off: () => {
        self._lPage.classList.remove("side-overlay-hover");
      },
      header_glass_toggle: () => {
        self._lPage.classList.toggle("page-header-glass");
        self._uiHandleHeader();
      },
      header_glass_on: () => {
        self._lPage.classList.add("page-header-glass");
        self._uiHandleHeader();
      },
      header_glass_off: () => {
        self._lPage.classList.remove("page-header-glass");
        self._uiHandleHeader();
      },
      header_mode_toggle: () => {
        self._lPage.classList.toggle("page-header-fixed");
      },
      header_mode_static: () => {
        self._lPage.classList.remove("page-header-fixed");
      },
      header_mode_fixed: () => {
        self._lPage.classList.add("page-header-fixed");
      },
      header_style_toggle: () => {
        if (self._lPage.classList.contains("page-header-dark")) {
          self._uiApiLayout("header_style_light");
        } else {
          self._uiApiLayout("header_style_dark");
        }
      },
      header_style_dark: () => {
        self._lPage.classList.add("page-header-dark");
      },
      header_style_light: () => {
        self._lPage.classList.remove("page-header-dark");
      },
      header_search_on: () => {
        self._lHeaderSearch.classList.add("show");
        self._lHeaderSearchInput.focus();

        // When ESCAPE key is hit close the search section
        document.addEventListener("keydown", (e) => {
          if (e.key === "Esc" || e.key === "Escape") {
            self._uiApiLayout("header_search_off");
          }
        });
      },
      header_search_off: () => {
        self._lHeaderSearch.classList.remove("show");
        self._lHeaderSearchInput.blur();
      },
      header_loader_on: () => {
        self._lHeaderLoader.classList.add("show");
      },
      header_loader_off: () => {
        self._lHeaderLoader.classList.remove("show");
      },
      dark_mode_toggle: () => {
        if (self._lHtml.classList.contains("dark")) {
          self._uiApiLayout("dark_mode_off");
        } else {
          self._uiApiLayout("dark_mode_on");
        }
      },
      dark_mode_on: () => {
        this._uiHandleDarkMode("on");
      },
      dark_mode_off: () => {
        this._uiHandleDarkMode("off");
      },
      dark_mode_system: () => {
        this._uiHandleDarkMode("system");
      },
      content_layout_toggle: () => {
        if (self._lPage.classList.contains("main-content-boxed")) {
          self._uiApiLayout("content_layout_narrow");
        } else if (self._lPage.classList.contains("main-content-narrow")) {
          self._uiApiLayout("content_layout_full_width");
        } else {
          self._uiApiLayout("content_layout_boxed");
        }
      },
      content_layout_boxed: () => {
        self._lPage.classList.remove("main-content-narrow");
        self._lPage.classList.add("main-content-boxed");
      },
      content_layout_narrow: () => {
        self._lPage.classList.remove("main-content-boxed");
        self._lPage.classList.add("main-content-narrow");
      },
      content_layout_full_width: () => {
        self._lPage.classList.remove("main-content-boxed");
        self._lPage.classList.remove("main-content-narrow");
      },
    };

    // Call layout API
    if (layoutAPI[mode]) {
      layoutAPI[mode]();
    }
  }

  /*
   * Blocks API
   *
   */
  _uiApiBlocks(mode = "init", block = false) {
    let self = this;

    // Helper variables
    let elBlock, btnFullscreen, btnContentToggle;

    // Set default icons for fullscreen and content toggle buttons
    let iconBase = "si";
    let iconFullscreen = "si-size-fullscreen";
    let iconFullscreenActive = "si-size-actual";
    let iconContent = "si-arrow-up";
    let iconContentActive = "si-arrow-down";

    // API with object literals
    let blockAPI = {
      init: () => {
        // Auto add the default toggle icons to fullscreen and content toggle buttons
        document
          .querySelectorAll(
            '[data-toggle="block-option"][data-action="fullscreen_toggle"]'
          )
          .forEach((btn) => {
            btn.innerHTML =
              '<i class="' +
              iconBase +
              " " +
              (btn.closest(".block").classList.contains("block-mode-fullscreen")
                ? iconFullscreenActive
                : iconFullscreen) +
              '"></i>';
          });

        document
          .querySelectorAll(
            '[data-toggle="block-option"][data-action="content_toggle"]'
          )
          .forEach((btn) => {
            btn.innerHTML =
              '<i class="' +
              iconBase +
              " " +
              (btn.closest(".block").classList.contains("block-mode-hidden")
                ? iconContentActive
                : iconContent) +
              '"></i>';
          });

        // Call blocks API on option button click
        document
          .querySelectorAll('[data-toggle="block-option"]')
          .forEach((btn) => {
            btn.addEventListener("click", (e) => {
              this._uiApiBlocks(btn.dataset.action, btn.closest(".block"));
            });
          });
      },
      fullscreen_toggle: () => {
        elBlock.classList.remove("block-mode-pinned");
        elBlock.classList.toggle("block-mode-fullscreen");

        // Update block option icon
        if (btnFullscreen) {
          if (elBlock.classList.contains("block-mode-fullscreen")) {
            btnFullscreen &&
              btnFullscreen
                .querySelector("i")
                .classList.replace(iconFullscreen, iconFullscreenActive);
          } else {
            btnFullscreen &&
              btnFullscreen
                .querySelector("i")
                .classList.replace(iconFullscreenActive, iconFullscreen);
          }
        }
      },
      fullscreen_on: () => {
        elBlock.classList.remove("block-mode-pinned");
        elBlock.classList.add("block-mode-fullscreen");

        // Update block option icon
        btnFullscreen &&
          btnFullscreen
            .querySelector("i")
            .classList.replace(iconFullscreen, iconFullscreenActive);
      },
      fullscreen_off: () => {
        elBlock.classList.remove("block-mode-fullscreen");

        // Update block option icon
        btnFullscreen &&
          btnFullscreen
            .querySelector("i")
            .classList.replace(iconFullscreenActive, iconFullscreen);
      },
      content_toggle: () => {
        elBlock.classList.toggle("block-mode-hidden");

        // Update block option icon
        if (btnContentToggle) {
          if (elBlock.classList.contains("block-mode-hidden")) {
            btnContentToggle
              .querySelector("i")
              .classList.replace(iconContent, iconContentActive);
          } else {
            btnContentToggle
              .querySelector("i")
              .classList.replace(iconContentActive, iconContent);
          }
        }
      },
      content_hide: () => {
        elBlock.classList.add("block-mode-hidden");

        // Update block option icon
        btnContentToggle &&
          btnContentToggle
            .querySelector("i")
            .classList.replace(iconContent, iconContentActive);
      },
      content_show: () => {
        elBlock.classList.remove("block-mode-hidden");

        // Update block option icon
        btnContentToggle &&
          btnContentToggle
            .querySelector("i")
            .classList.replace(iconContentActive, iconContent);
      },
      state_toggle: () => {
        elBlock.classList.toggle("block-mode-loading");

        // Return block to normal state if the demostration mode is on in the refresh option button - data-action-mode="demo"
        if (
          elBlock.querySelector(
            '[data-toggle="block-option"][data-action="state_toggle"][data-action-mode="demo"]'
          )
        ) {
          setTimeout(() => {
            elBlock.classList.remove("block-mode-loading");
          }, 2000);
        }
      },
      state_loading: () => {
        elBlock.classList.add("block-mode-loading");
      },
      state_normal: () => {
        elBlock.classList.remove("block-mode-loading");
      },
      pinned_toggle: () => {
        elBlock.classList.remove("block-mode-fullscreen");
        elBlock.classList.toggle("block-mode-pinned");
      },
      pinned_on: () => {
        elBlock.classList.remove("block-mode-fullscreen");
        elBlock.classList.add("block-mode-pinned");
      },
      pinned_off: () => {
        elBlock.classList.remove("block-mode-pinned");
      },
      close: () => {
        elBlock.classList.add("d-none");
      },
      open: () => {
        elBlock.classList.remove("d-none");
      },
    };

    if (mode === "init") {
      // Call Block API
      blockAPI[mode]();
    } else {
      // Get block element
      elBlock =
        block instanceof Element ? block : document.querySelector(`${block}`);

      // If element exists, procceed with block functionality
      if (elBlock) {
        // Get block option buttons if exist (need them to update their icons)
        btnFullscreen = elBlock.querySelector(
          '[data-toggle="block-option"][data-action="fullscreen_toggle"]'
        );
        btnContentToggle = elBlock.querySelector(
          '[data-toggle="block-option"][data-action="content_toggle"]'
        );

        // Call Block API
        if (blockAPI[mode]) {
          blockAPI[mode]();
        }
      }
    }
  }

  /*
   ********************************************************************************************
   *
   * Helpers
   *
   *********************************************************************************************
   */

  /*
   * On DOM content loaded
   *
   */
  onLoad(fn) {
    if (document.readyState != "loading") {
      fn();
    } else {
      document.addEventListener("DOMContentLoaded", fn);
    }
  }

  /*
   ********************************************************************************************
   *
   * Create aliases for easier/quicker access to vital methods
   *
   *********************************************************************************************
   */

  /*
   * Init base functionality
   *
   */
  init() {
    this._uiInit();
  }

  /*
   * Layout API
   *
   */
  layout(mode) {
    this._uiApiLayout(mode);
  }

  /*
   * Blocks API
   *
   */
  block(mode, block) {
    this._uiApiBlocks(mode, block);
  }

  /*
   * Handle Page Loader
   *
   */
  loader(mode, colorClass) {
    this._uiHandlePageLoader(mode, colorClass);
  }

  /*
   * Run Helpers
   *
   */
  helpers(helpers, options = {}) {
    Helpers.run(helpers, options);
  }

  /*
   * Run Helpers on DOM content loaded
   *
   */
  helpersOnLoad(helpers, options = {}) {
    this.onLoad(() => Helpers.run(helpers, options));
  }
}