const main_buttons = document.querySelectorAll('.main');
main_buttons.forEach((button) => {
  button.addEventListener('click', ( {target} ) => {
    if (target.classList.contains('checked')) {
      target.classList.remove('checked');
      target.classList.add('unchecked');
      subButtons('hidden', target);
      //messageBox('hide');
    } else {
      target.classList.remove('unchecked');
      target.classList.add('checked'); 
      subButtons('visible', target);
    }
  });
});

const section_buttons = document.querySelectorAll('.submain');
section_buttons.forEach((button) => { 
  button.addEventListener('click', ( {target} ) => {
    let text = 'Czy jesteś pewny że chcesz wybrać przycisk:';
    text = `${text} <b>${target.value}</b> ?`    
    messageBox('show', text, target.value);
  });
});

const message_box = document.querySelector('.message-box');
const message = document.querySelector('.message-box .message');
const message_box_buttons = document.querySelectorAll('.message-box button');

message_box_buttons.forEach((button) => {
  button.addEventListener('click', ( {target} ) => {
    switch(target.value) {
      case 'cancel':
        messageBox('hide');
        break;
      case 'ok':        
        const action = message_box.getAttribute('data-action');
        // tu akcja
        alert('Akcja dla: ' + action);
        /* swich(action) {
              case '1-1':
                dla przycisku <button value="1-1">
                break;
              . . .  
              case '3-2':
                dla przycisku <button value="3-2">
                break;
              itp.
           }
        */
        break;
    }
  });
});

function messageBox(cmd, msg='', action='') {
  let class_remove = '';
  let class_add = '';
  
  switch(cmd) {
    case 'show':
      class_remove = 'hidden';
      class_add = 'visible';
      break;
    case 'hide':      
      class_remove = 'visible';
      class_add = 'hidden';
      break;
  }
  
  message_box.setAttribute('data-action', action);
  message.innerHTML = msg;
  message_box.classList.remove(class_remove);
  message_box.classList.add(class_add);
}

function subButtons(cmd, target) {
  const section_buttons = target.closest('section');  
  if(!! section_buttons) {
    const sub_buttons = section_buttons.querySelectorAll('.submain');
    if(!! sub_buttons) {
      sub_buttons.forEach((sub_button) => {
        if(cmd == 'visible') {
          sub_button.classList.remove('hidden');
          sub_button.classList.add('visible');        
        } else {
          sub_button.classList.remove('visible');
          sub_button.classList.add('hidden');         
        }
      });
    }
  }
}