import { overlaySelectors } from './constants';
import { EVENT_NAMES } from '../../constants/define';

const { PAUSE, RESUME } = EVENT_NAMES.CLIENT_RECORDER;

export default class Overlay {
  constructor({ store }) {
    this.store = store;
  }

  mount() {
    this._createOverlay();
    window.addEventListener('load', this._createOverlay, true);
    window.addEventListener('beforeunload', this.destroy, true);
    window.addEventListener('message', this._handleMessage);
  }

  _handleMessage = (event) => {
    if (event.data && event.data.control) {
      switch (event.data.control) {
        case PAUSE:
          document.getElementById('pauseButton').style.display = 'none';
          document.getElementById('resumeButton').style.display = '';
          break;
        case RESUME:
          document.getElementById('pauseButton').style.display = '';
          document.getElementById('resumeButton').style.display = 'none';
          break;
        default:
          break;
      }
    }
  };

  _createOverlay = () => {
    this.destroy();
    const { isPaused, isTableMode } = this.store.getState();

    // Create the overlay div
    const overlayHTML = `
      <div id="${overlaySelectors.OVERLAY_ID}" style="
        position: fixed;
        top: 0;
        right: 0;
        background-color: white;
        z-index: 10000000000000;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
      " onclick="
        (function(event) {
          if (event.target.id === 'pauseButton') {
            window.headlessRecorderAPI.pause();
          } else if (event.target.id === 'resumeButton') {
            window.headlessRecorderAPI.resume();
          } else if (event.target.id === 'isTableMode') {
            window.headlessRecorderAPI.toggleTableMode();
          }
          event.stopPropagation();
        })(event);
      " onmousemove="
        (function(event) {
          event.stopPropagation();
        })(event);
      " onmouseover="
        (function(event) {
          event.stopPropagation();
        })(event);
      " oninput="
        (function(event) {
          event.stopPropagation();
        })(event);
      ">
        <div style="
          display: flex;
          justify-content: space-evenly;
          align-items: center;
        ">
          <input style="margin: 0px 5px;" type="checkbox" id="isTableMode" ${isTableMode ? 'checked' : ''}>
          <div>Table Mode</div>
        </div>
        <button id="pauseButton" style="${isPaused ? 'display: none;' : ''}">Pause</button>
        <button id="resumeButton" style="${isPaused ? '' : 'display: none;'}">Resume</button>
      </div>`;

    // Append the overlay to the body
    document.body.insertAdjacentHTML('beforeend', overlayHTML);
  };

  destroy = () => {
    const overlay = document.getElementById(overlaySelectors.OVERLAY_ID);
    if (overlay) {
      overlay.remove();
    }
  };

  // don't know why below doesn't work, the event window.headelssRecorderAPI.pause() is undefined

  // mount = () => {
  //   const { isPaused } = this.store.getState();

  //   // Create the overlay div
  //   this._overlay = document.createElement('div');
  //   this._overlay.id = overlaySelectors.OVERLAY_ID;
  //   this._overlay.style.position = 'fixed';
  //   this._overlay.style.top = '0';
  //   this._overlay.style.right = '0';
  //   this._overlay.style.backgroundColor = 'white';
  //   this._overlay.style.zIndex = '10000000000000';
  //   this._overlay.style.display = 'flex';
  //   this._overlay.style.justifyContent = 'center';
  //   this._overlay.style.alignItems = 'center';
  //   this._overlay.style.color = 'black';

  //   this._overlay.addEventListener('click', (e) => {
  //     if (e.target.id === 'pauseButton') {
  //       window.headlessRecorderAPI.pause();
  //     } else if (e.target.id === 'resumeButton') {
  //       window.headlessRecorderAPI.resume();
  //     }
  //     e.stopPropagation();
  //   });
  //   this._overlay.addEventListener('mousemove', (e) => {
  //     e.stopPropagation();
  //   });

  //   this._overlay.addEventListener('mouseover', (e) => {
  //     e.stopPropagation();
  //   });

  //   // Create the pause button
  //   const pauseButton = document.createElement('button');
  //   pauseButton.id = 'pauseButton';
  //   pauseButton.style.display = isPaused ? 'none' : '';
  //   pauseButton.innerText = 'Pause';

  //   // Create the resume button
  //   const resumeButton = document.createElement('button');
  //   resumeButton.id = 'resumeButton';
  //   resumeButton.style.display = isPaused ? '' : 'none';
  //   resumeButton.innerText = 'Resume';

  //   // Append the buttons to the overlay
  //   this._overlay.appendChild(pauseButton);
  //   this._overlay.appendChild(resumeButton);

  //   // Append the overlay to the body
  //   document.body.appendChild(this._overlay);
  // };
  //
}
