import * as DivCommon from './div-page-common';

export default function OnlineRoomDivPage(element, listener) {

  const id='online-room';
  const className=OnlineRoomDivPage.name;
  let div = element.getChildByID(id);

  let createOnlineGameButton = element.getChildByName('createOnlineGame');
  let joinOnlineGameButton = element.getChildByName('joinOnlineGame');
  let backToMainButton = element.getChildByName('backToMain');
  let listOnlineGames = element.getChildByID('list-games');
  let connectionStatus = element.getChildByID('connectionStatusOnline');
  let loaderOnlineGames = element.getChildByID('loader-online-games');

  let eventListener = function(event) {
    let eventName = event.target.name;
    switch (eventName) {
      case "backToMain":
        console.log('in online room div page, backToMain clicked');
        listener.onGoPreviousPage(onlineRoomDivPage);
        break;
      case "createOnlineGame":
        listener.onGoGameCreation();
        break;

      default:
        break;
    }

  };

  div.addEventListener('click',eventListener);

  let onShow = function() {
    listener.onRequestOnlineGamesList()
      .then( (games) => {
        console.log('received games : ', games);

        while(listOnlineGames.firstChild) listOnlineGames.removeChild(listOnlineGames.firstChild);
        console.log('removed ex list');
        games.forEach(game => {
          console.log(game);
          let title='';
          let desc='';
          let rules= '';
          if (game.adv_rules.length !== 0) {
            game.adv_rules.forEach(rule => {
              rules += ' + ' + rule;
            });
          } else {
            rules= ' + no adv. rules';
          }
          desc=`${game.deck}${rules}`;
          if (game.player2 !== '') {
            title=`Resume ${game.player1} VS ${game.player2}`;
          } else {
            title=`${game.player1} waiting...`;
          }
          let li = document.createElement("li");
          let spanTitle = document.createElement("span");
          let spanDesc = document.createElement("span");
          let div = document.createElement("div");
          spanTitle.setAttribute("class", "game-entry-title");
          spanDesc.setAttribute("class", "game-entry-desc");
          spanTitle.appendChild(document.createTextNode(title));
          spanDesc.appendChild(document.createTextNode(desc));
          li.appendChild(spanTitle);
          li.appendChild(div);
          li.appendChild(spanDesc);
          li.setAttribute("id",game.id);
          listOnlineGames.appendChild(li);
        });
        loaderOnlineGames.style.display= 'none';
        listOnlineGames.style.display= 'block';
      })
      .catch( (error) => {
        loaderOnlineGames.style.display= 'none';
        listOnlineGames.style.display= 'block';
        listOnlineGames.innerText=error;
        connectionStatus.innerText=error;
        createOnlineGameButton.disabled=true;
        console.log('error to receive games : ' + error);
      });
  };

  let onHide = function() {

    listOnlineGames.style.display= 'none';
    loaderOnlineGames.style.display= 'block';
    createOnlineGameButton.disabled=false;
    listOnlineGames.innerText='';
  };

  let onlineRoomDivPage = {
    className,
    div,
    connectionStatus,
    onShow,
    onHide
  };

  return Object.assign(
    onlineRoomDivPage,
    DivCommon.canShow(onlineRoomDivPage),
    DivCommon.canHide(onlineRoomDivPage),
    DivCommon.hasConnectionState(onlineRoomDivPage)
  );

}



