import './styles/brain.css';
import './stimulus_bootstrap.js';

const init = () => {
  menu();
  editorInit();
  photosUploadInit();
};

const menu = () => {
  const subMenus = document.querySelectorAll('.sub-menu--link');

  subMenus.forEach((menu) => {
    
    menu.addEventListener('mouseover', (event) => {
      const targetedMenu = event.target.nextElementSibling;

      const openMenu = document.querySelector('.level-2.open');
      if (openMenu) {
        openMenu.classList.remove('open');
      }
      
      if (targetedMenu.classList.contains('open')) {
        targetedMenu.classList.remove('open');
      } else {
        targetedMenu.classList.add('open');
      }

    });
  });
}

const editorInit = () => {
  if (document.querySelector('#post_text')) {
    const editor = Jodit.make('#post_text', {
        "enter": "P",
        "theme": 'dark',
        "disablePlugins": "ai-assistant,about",
        "width": 800,
        "height": 500
    });

    const descEditor = Jodit.make('#post_description', {
        "enter": "P",
        "theme": 'dark',
        "disablePlugins": "ai-assistant,about",
        "width": 800,
        "height": 200
    });
  }

  if (document.querySelector('#page_text')) {
    const editor = Jodit.make('#page_text', {
        "enter": "P",
        "theme": 'dark',
        "disablePlugins": "ai-assistant,about",
        "width": 800,
        "height": 500
    });
    
    const descEditoreditor = Jodit.make('#page_description', {
        "enter": "P",
        "theme": 'dark',
        "disablePlugins": "ai-assistant,about",
        "width": 800,
        "height": 200
    });
  }

  if (document.querySelector('#photos_text')) {
    const editor = Jodit.make('#photos_text', {
        "enter": "P",
        "theme": 'dark',
        "disablePlugins": "ai-assistant,about",
        "width": 800,
        "height": 500
    });

    const descEditoreditor = Jodit.make('#photos_description', {
        "enter": "P",
        "theme": 'dark',
        "disablePlugins": "ai-assistant,about",
        "width": 800,
        "height": 200
    });
  }
}

const photosUploadInit = () => {
  document
  .querySelectorAll('.add_item_link')
  .forEach(btn => {
      btn.addEventListener("click", addFormToCollection)
  });

  function addFormToCollection(e) {
    const collectionHolder = document.querySelector('#' + e.target.dataset.collectionHolderId);
    const item = document.createElement('li');

    let index;

    if (!collectionHolder.dataset.index) {
      collectionHolder.dataset.index = 0;
    }
  
    index = collectionHolder.dataset.index;

    item.innerHTML = collectionHolder
      .dataset
      .prototype
      .replace(
        /__name__/g,
        index
      );

    collectionHolder.appendChild(item);

    collectionHolder.dataset.index++;
  };
}


document.addEventListener('turbo:load', (event) => {
  init();
});