export default class Loader {
  constructor({ store } = {}) {
    this._overlay = null;
    this.store = store;
  }

  init() {
    window.addEventListener('beforeunload', this.showLoadingOverlay, true);
    window.addEventListener('load', this.hideLoadingOverlay, true);
  }

  showLoadingOverlay = () => {
    this.hideLoadingOverlay();
    if (document.getElementById('custom-loading-overlay')) return;
    this._overlay = document.createElement('div');
    this._overlay.id = 'custom-loading-overlay';
    this._overlay.style.position = 'fixed';
    this._overlay.style.top = '0';
    this._overlay.style.bottom = '0';
    this._overlay.style.left = '0';
    this._overlay.style.right = '0';
    this._overlay.style.background = 'rgba(0, 0, 0, 0.5)';
    this._overlay.style.zIndex = '999999';
    this._overlay.style.display = 'flex';
    this._overlay.style.justifyContent = 'center';
    this._overlay.style.alignItems = 'center';

    const text = document.createElement('div');
    text.textContent = 'Loading...';
    text.style.color = 'white';
    text.style.fontSize = '2em';

    this._overlay?.appendChild(text);

    document.body?.appendChild(this._overlay);
  };

  hideLoadingOverlay = () => {
    if (this._overlay) {
      this._overlay.style.display = 'none';
    }
  };
}
