const CART_SIZE = {
  x: 300,
  y: 200
}

function slot_position(){
  let slot = document.querySelector('#slot');
  return slot.getBoundingClientRect()
}

function list_carts(){
  let carts= document.querySelectorAll('.cartridge-metadata');
  return carts;

}


function showPopups(){
  let carts = list_carts();

  let cartPopups = carts.forEach((cart) => {
    console.log('cart', cart);
    let popup = window.open(
        cart.getAttribute('url'),
        cart.getAttribute('title'),
        `popup=true,width=${CART_SIZE.x+10},height=${CART_SIZE.y+10}`
        )
    popup.screen
  })
}



// function store_slot_position(){
//   let slot_pos = slot_position();
//   console.log(slot_pos);
//   window.setTimeout(poll_position, 1000);
// }

function store_position(){
  let name = document.querySelector('.cartridge .label').textContent;
  let position = {
    x: window.screenX,
    y: window.screenY,
    width: window.outerWidth,
    height: window.outerHeight
  };

  localStorage.setItem(name,  JSON.stringify(position));
  window.setTimeout(store_position, 100);
  console.log('store position', position);
}

function console_message(msg){
  // console.log('console message', msg);
  let cart_position = JSON.parse(msg.newValue);
  cart_position['name'] = String(msg.key).trim();
  console.log(cart_position)
}

function init_console(){
  showPopups();
  // store_slot_position();

  // window.addEventListener('resize', () => {
  //   store_slot_position();
  // })

  window.addEventListener('storage', (event) => {console_message(event)})
}

function init_cartridge(){
  console.log('init cartridge')
  store_position();
}

export function init(){
  window.showPopups = showPopups;
  let page_type = document.querySelector('main').getAttribute('page');
  if (page_type === 'console'){
    init_console();
  } else if (page_type === "cartridge"){
    init_cartridge();
  }
}