import { createModalElements, removeStylesOfHighlightedElements, changeStylesForRelines } from './features/index.js';
import { another, chatWindow, commonFrame, onlineList, slotsForThings, stats } from './modalSteps/index.js';
import { allowRender, cleanState, setStep } from './redux/actions.js';
import { dispatch, getState, subscribe } from './redux/store.js';

const openRegistrationTrainingModal = () => {
  if (localStorage.getItem('modalTest') === 'kravich') {
    createModalElements();
    dispatch(allowRender());
  }
};

subscribe(() => {
  const { currentStep, isAllowRender } = getState();

  if (!isAllowRender) {
    return;
  }

  switch (currentStep) {
    case 1:
      commonFrame(currentStep);
      break;
    case 2:
      chatWindow(currentStep);
      break;
    case 3:
      onlineList(currentStep);
      break;
    case 4:
      slotsForThings(currentStep);
      break;
    case 5:
      stats(currentStep);
      break;
    case 6:
      another(currentStep);
      break;
  }

  if (currentStep < 6) {
    const $nextButton = document.getElementById('nextTrainingModal');

    $nextButton.onclick = () => {
      dispatch(setStep(currentStep + 1));
    };
  } else {
    const $modalCloseButton = document.getElementById('closeTrainingModal');
    const $modalMain = document.getElementById('trainingModalMain');

    $modalCloseButton.onclick = () => {
      changeStylesForRelines(true);
      removeStylesOfHighlightedElements();

      $modalMain.remove();

      dispatch(cleanState());
    };
  }
});

openRegistrationTrainingModal();