const code = '';
let content = {};
let lvl = 0;
let pnlName = '';

// $(document).ready(function () {
//   $('#pnlLogin').show();
//   rotate();
//   window.addEventListener('resize', rotate,false)
//   const query = window.location.search;
//   if (query) {
//     console.log(query)
//     const splitQuery = window.atob(query.substr(1));
//     autoLogin(splitQuery);
//   }
// });
function rotate(event) {
  const $rotation = $('#pnlRotation');
  const $body = $('body');
  if($body[0].offsetHeight > $body[0].offsetWidth) {
    $rotation.fadeIn(100);
  } else {
    $rotation.fadeOut(100);
  }
} 
function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

// function autoLogin(lel) {
//   const txt = lel;
//   const settings = {
//     type: "POST",
//     url: '/authentication',
//     data: {
//       Code: txt,
//     },
//     success: function (response) {
//       const code = window.btoa(txt);
//       setCookie('Code', code, 10);
//       $('#pnlLogin').fadeOut(1000);
//       setTimeout(function () {
//         lvl = response.level;
//         pnlName = '#pnlSelection_lvl' + response.level;
//         $(pnlName).fadeIn(1000);
//       }, 1050);
//       content = response.content;
//       //console.log(response);
//     },
//     error: function (err) {
//       //console.log(err.responseJSON.msg);
//       $('#errMsg').html(err.responseJSON.msg);
//       $('#pnlErr').fadeIn(700);
//     },
//   };
//   $.ajax(settings);
// }

// function Login() {
//   const txt = $('#txtCode')[0];
//   const settings = {
//     type: "POST",
//     url: '/authentication',
//     data: {
//       Code: txt.value,
//     },
//     success: function (response) {
//       const code = window.btoa(txt.value);
//       setCookie('Code', code, 10);
//       $('#pnlLogin').fadeOut(1000);
//       setTimeout(function () {
//         lvl = response.level;
//         pnlName = '#pnlSelection_lvl' + response.level;
//         $(pnlName).fadeIn(1000);
//       }, 1050);
//       content = response.content;
//       console.log(response);
//     },
//     error: function (err) {
//       console.log(err.responseJSON.msg);
//       $('#errMsg').html(err.responseJSON.msg);
//       $('#pnlErr').fadeIn(700);
//     },
//   };
//   $.ajax(settings);
// }

// function Login(value) {
window.login = (res, level, _code, _content, msg) =>{
  //console.log(res, level, _code, _content, msg);
  if(res){
    const code = btoa(_code);
    
    setCookie('Code', code, 10);
    $('#pnlLogin').fadeOut(500);
    setTimeout(function () {
      lvl = level;
      pnlName = '#pnlSelection_lvl' + level;
      $(pnlName).fadeIn(500);
    }, 1050);
    // content = _content;
    content.gamePath = _content.gamePath;
    content.videos = _content.videos;
    content.mp3s = _content.mp3s;
    //console.log(content)
  } else {
    //console.log(msg);
    $('#errMsg').html(msg);
    $('#pnlErr').fadeIn(500);
  }
}

function saveAndExit() {
  $('#gameFrame').fadeOut(200);
}
function Exit() {
  const player = document.getElementsByTagName('video')[0];
  player.pause();
  $('#videoFrame').fadeOut(200);
}

function playgame() {
  const iframe = document.getElementsByTagName('iframe')[0];
  iframe.src = content.gamePath +'?Code='+ window.atob(getCookie('Code'));
  // iframe.src = content.gamePath +'?Code='+ window.atob(getCookie('Code'));

  // console.log(iframe)
  // console.log(content.gamePath)
  $('#gameFrame').fadeIn(500);
}

function openmp3() {
  $(pnlName).fadeOut(200);
  $('#vidContainers').html('');  
  let mp3s = $('#vidContainers').html();
  for (let i = 0; i < content.mp3s.length; i++) {
    const element = content.mp3s[i];
    let parsedA = element.split(' ');
    parsedA = parsedA[parsedA.length-1].split('.')[0];
    mp3s += `<div class='audio'>
              <h3>Track ${parsedA}</h3>
              <audio controls controlsList="nodownload">
                <source src="${element}" type="audio/wav">
                Your browser does not support the audio element.
              </audio>
            </div>`;
  }

  $('#vidContainers').html(mp3s);
  $('#pnlMp3s').fadeIn(500);
}

function openvideos() {
  $(pnlName).fadeOut(200);
  $('#vidContainer').html('');  
  let vids = $('#vidContainer').html();
  for (let i = 0; i < content.videos.length; i++) {
    const element = content.videos[i];
    let name = element.split('/');
    name = name[name.length - 1];
    name = name.split('.');
    name = name[0];
    name = name.split('_').join(' ');
    //console.log(name);
    vids += `<div class="sqVid${lvl}">
    <p class='vidName'>${name}</p>
    <div class="btnPlay" onclick="playvideo('${element}')">Play</div>
    </div>`;
  }
  $('#vidContainer').html(vids);
  $('#pnlVideos').fadeIn(500);
}

function playvideo(src) {
  const player = document.getElementsByTagName('video')[0];
  player.src = src +'?Code='+ window.atob(getCookie('Code'));
  $('#videoFrame').fadeIn(500);
}

function back() {
  $('#pnlVideos').fadeOut(500);
  $(pnlName).fadeIn(500);  
}

  function stopAllAudio() {
    const audios = document.querySelectorAll('audio');
    audios.forEach(audio => {
      if (!audio.paused) {
        audio.pause();  
        audio.currentTime = 0;  
      }
    });
  }

function Okay() {
  $('#pnlErr').fadeOut(500);
}

function downloadSongsAndStories(lvl) {
  window.location = `/download/LWO/Learn_With_Ollie_${lvl}.rar`;
}

function backMenu() {
  // function stopAllAudio() {
    const audios = document.querySelectorAll('audio');
    audios.forEach(audio => {
      if (!audio.paused) {
        audio.pause();  
        audio.currentTime = 0;  
      }
    });
  // }
  $('#pnlMp3s').fadeOut(500);
  $(pnlName).fadeIn(500);  
}