const BORDER_THICKNESS = 2;

export default class HightLight {
  constructor({ store }) {
    this.store = store;
    this._highlightedElements = new Map();
  }

  init() {
    window.addEventListener('message', this._handleMessage);
    window.addEventListener('scroll', this._handleScroll, true);
  }

  _handleMessage = (event) => {
    if (event.data) {
      switch (event.data.control) {
        case 'toggleTableMode': {
          this._highlightedElements.forEach((highlight) => {
            highlight.remove();
          });
          this._highlightedElements.clear();
          break;
        }
        case 'addHighlight': {
          const { type, selector, name } = event.data || {};
          this._hightLightSelector(type, selector, name);
          break;
        }
        case 'removeHighlight': {
          const { selector } = event.data || {};
          if (this._highlightedElements.has(selector)) {
            const highlight = this._highlightedElements.get(selector);
            highlight.remove();
            this._highlightedElements.delete(selector);
          }
          break;
        }
        default:
          break;
      }
    }
  };

  _hightLightSelector = (type, selector, name) => {
    let element = document.querySelector(selector);

    if (element) {
      const highLightElement = this._createHighlight();
      const rect = element.getBoundingClientRect();

      highLightElement.style.top = rect.top + 'px';
      highLightElement.style.left = rect.left + 'px';
      highLightElement.style.width = element.offsetWidth + 'px';
      highLightElement.style.height = element.offsetHeight + 'px';
      highLightElement.style.border = `${BORDER_THICKNESS}px dashed ${type?.color}`;
      highLightElement.style.background = type?.background;
      // highLightElement.setAttribute('data-selector', selector);

      const textElement = document.createElement('div');
      textElement.style.position = 'absolute'; // Change from 'relative' to 'absolute'
      textElement.style.top = `-${BORDER_THICKNESS + 20}px`; // position it above the border
      textElement.style.left = `0px`; // align it with the left edge of the border
      textElement.style.color = type?.color;
      textElement.style.zIndex = 2147483647; // to make sure it is on top of everything else
      textElement.textContent = `${type?.typeName}${name ? ` (${name})` : ''}`;
      highLightElement.appendChild(textElement); // Append the text element as a child of the target element
      // this._highlightedElements.add(highLightElement);
      this._highlightedElements.set(selector, highLightElement);
    }
  };

  _createHighlight = () => {
    const highLightElement = document.createElement('div');
    highLightElement.style.position = 'fixed';
    highLightElement.style.zIndex = 888888;
    highLightElement.style.pointerEvents = 'none';
    highLightElement.style.borderRadius = '2px';
    highLightElement.style.boxSizing = 'border-box';
    highLightElement.style.top = '0px';
    highLightElement.style.left = '0px';
    highLightElement.style.width = '100%';
    highLightElement.style.height = '100%';
    document.body.appendChild(highLightElement);

    return highLightElement;
  };

  _handleScroll = () => {
    if (this._highlightedElements.size > 0) {
      this._highlightedElements.forEach((highlight, selector) => {
        const element = document.querySelector(selector);
        if (element) {
          const rect = element.getBoundingClientRect();
          Object.assign(highlight.style, {
            top: `${rect.top}px`,
            left: `${rect.left}px`,
          });
        } else {
          highlight.style.display = 'none';
        }
      });
    }
  };
}
