import * as storage from '../../utilities/localStorage';
import { EVENT_NAMES } from '../../constants/define';

const { PAUSE, RESUME } = EVENT_NAMES.CLIENT_RECORDER;

const defaultState = {
  isCopying: false,
  isClosed: false,
  isPaused: false,
  isLoading: false,
  isStopped: false,
  isReplay: false,
  isTableMode: true,
  reselectSelector: null,
  hightLightingSelectors: [],
  recording: [],
};

const LOCAL_STORAGE_KEY = 'recorderState';

class Store {
  constructor({ options, eventId, onUpdateEvents, onUpdateSelector, onUpdateRecordScrapingDetailColumn } = {}) {
    console.log({ options, eventId });
    this.state = storage.get(LOCAL_STORAGE_KEY)
      ? {
          ...storage.get(LOCAL_STORAGE_KEY),
          ...(options ? options : {}),
          hightLightingSelectors: options?.hightLightingSelectors || [],
        }
      : {
          ...defaultState,
          ...(options ? options : {}),
        };
    storage.set(LOCAL_STORAGE_KEY, this.state);
    this.eventId = eventId || null;
    this.onUpdateEvents = onUpdateEvents || (() => {});
    this.onUpdateSelector = onUpdateSelector || (() => {});
    this.onUpdateRecordScrapingDetailColumn = onUpdateRecordScrapingDetailColumn || (() => {});
  }

  getState = () => {
    return this.state;
  };

  // mutations
  showRecorded = () => {
    this.state.hasRecorded = true;
    storage.set(LOCAL_STORAGE_KEY, this.state);
  };

  setRecording = (newRecording) => {
    this.state.recording = newRecording;
    storage.set(LOCAL_STORAGE_KEY, this.state);
    // this.state.onUpdateRecording(newRecording);
    if (this?.onUpdateEvents) {
      this?.onUpdateEvents(newRecording);
    }
    if (this?.onUpdateRecordScrapingDetailColumn) {
      this?.onUpdateRecordScrapingDetailColumn(newRecording);
    }
  };

  addHighlightingSelector = (type, selector, name) => {
    this.state.hightLightingSelectors.push({
      type,
      selector,
      name,
    });
    window.postMessage({ control: 'addHighlight', type, selector, name }, '*');
  };

  removeHighlightedSelector = (type, selector) => {
    this.state.hightLightingSelectors = this.state.hightLightingSelectors.filter((item) => item.selector !== selector);
    window.postMessage({ control: 'removeHighlight', selector }, '*');
  };

  pause = () => {
    this.state.isPaused = true;
    storage.set(LOCAL_STORAGE_KEY, this.state);
    window.postMessage({ control: PAUSE }, '*');
  };

  resume = () => {
    this.state.isPaused = false;
    storage.set(LOCAL_STORAGE_KEY, this.state);
    window.postMessage({ control: RESUME }, '*');
  };

  clear = () => {
    this.state = defaultState;
    storage.set(LOCAL_STORAGE_KEY, this.state);
  };

  stop = () => {
    this.state.isStopped = true;
    storage.set(LOCAL_STORAGE_KEY, this.state);
  };

  toggleTableMode = () => {
    const { isTableMode, hightLightingSelectors } = this.state;
    hightLightingSelectors.forEach((selector) => {
      window.postMessage({ control: 'removeHighlight', selector }, '*');
    });

    this.state = {
      ...this.state,
      isTableMode: !isTableMode,
      hightLightingSelectors: [],
    };

    storage.set(LOCAL_STORAGE_KEY, this.state);
    window.postMessage({ control: 'toggleTableMode' }, '*');
  };

  // onUpdateSelector(selector) {
  //   this.state.selector = selector;
  //   storage.set(LOCAL_STORAGE_KEY, this.state);
  // }

  updateSelectors(type, selector) {
    if (this?.onUpdateSelector) {
      this.onUpdateSelector(type, selector, this.state);
    }
  }
}

export default Store;
