// $(document).ready(function() {
//   let imageResized = $('.image-transform');
//   let menuContainer = $('#menu-container');

//   menuContainer.on('click', '.menu-item', function(event) {
//       let menuElement = $(event.target);
//       let imageId = menuElement.data('image-id');
//       let imageElement = $('#' + imageId);

//       if (imageElement.hasClass('active')) {
//           imageElement.removeClass('active');
//           return;
//       }

//       imageResized.removeClass('active'); 
//       imageElement.addClass('active');

//       console.log(menuElement.attr('id'));
//       console.log(imageElement);
//   });
// });


let allImageItems = document.querySelectorAll('.image-transform')
let allMenuTitles = document.querySelectorAll('.category-item-title')


const menuClickHandler = (menuId, imageId) =>{
  let menuElement = document.getElementById(menuId)
  let imageElement = document.getElementById(imageId)

  menuElement.addEventListener('click', function (event) {
    if (imageElement.classList.contains('active')) {
      imageElement.classList.remove('active')
      return
    }
    allImageItems.forEach(el => el.classList.remove('active'))

    imageElement.classList.add('active')

    console.log(event.target.id);
    console.log(imageElement);
  } )
}

const imageClickHandler = (menuId, imageId) =>{
  let menuElement = document.getElementById(menuId)
  let imageElement = document.getElementById(imageId)
  let allSubmenuItems = document.querySelector(`#${menuId} + .posts-submenu-parent`)

  imageElement.addEventListener('click', function (event) {
    if (imageElement.classList.contains('active')) {
      imageElement.classList.remove('active')
      // allSubmenuItems.classList.remove('active')
      menuElement.style.backgroundColor = 'white';
      menuElement.style.color = '#0e245c';
      allSubmenuItems.style.display = 'none'
      return
    }
    allImageItems.forEach(el => el.classList.remove('active'))
    // allMenuTitles.forEach((el) => {
    //   el.style.backgroundColor = 'white';
    //   el.style.style.color = '0e245c';
    // })

    imageElement.classList.add('active')
    allSubmenuItems.style.display = 'block'
    // allSubmenuItems.classList.add('active')
    // menuElement.lastChild.style.display = 'block';
    menuElement.style.backgroundColor = '#0e245c';
    menuElement.style.color = 'white';

    console.log(event.target.id);
    console.log(imageElement);
  } )
}

menuClickHandler('category-title-0', 'dasht')
imageClickHandler('category-title-0', 'dasht')
menuClickHandler('category-title-1', 'mahvare')
imageClickHandler('category-title-1', 'mahvare')
menuClickHandler('category-title-2', 'pahpad')
imageClickHandler('category-title-2', 'pahpad')
menuClickHandler('category-title-3', 'chah')
imageClickHandler('category-title-3', 'chah')
menuClickHandler('category-title-4', 'kashtt')
imageClickHandler('category-title-4', 'kashtt')
menuClickHandler('category-title-5', 'teractor')
imageClickHandler('category-title-5', 'teractor')
menuClickHandler('category-title-6', 'bardasht')
imageClickHandler('category-title-6', 'bardasht')
menuClickHandler('category-title-7', 'khak')
imageClickHandler('category-title-7', 'khak')


// const allImageItems = document.querySelectorAll('.image-transform')

// allImageItems.forEach((image) =>{
//   image.addEventListener('click', () =>{

//   })
// })