const btnLoginPage = document.querySelector('.btn-login');
const btnUserProfile = document.querySelector('.btn-userProfile');
const btnLogout = document.querySelector('.btn-logout');
function loginControl() {
  btnLoginPage.style.display = 'none';
  btnLogout.style.display = 'block';
  btnUserProfile.style.display = 'block';
}

loginControl();
function renderXHR_data(jsonObj) {
   XHRstring = ''
   for (const [key, value] of Object.entries(jsonObj)) {
     console.log(value)
     if (typeof (value) == "object") {
       XHRstring += (key+'=['+value.join(',')+']&')
     }
     else {
       XHRstring += (key + '=' + value + '&')
     }
   }
   XHRstring = XHRstring.substring(0, XHRstring.length - 1);
   return XHRstring
 }

 let lan = localStorage.getItem('lan');

$('.dropdown-toggle').click(() => {
  lan = localStorage.getItem('lan');
  checkLan();
});

checkLan();

function checkLan() {
  if(lan == 'en') {
    $('.btn-makev').css('display', 'none');
    $('.btn-makelong').css('display', 'none');
  } else {
    $('.btn-makev').css('display', 'block');
    $('.btn-makelong').css('display', 'block');
  }
}

$(".sender").click(function () {

  var pwd = $("#in_pwd").val();
  var code = $("#code").val();
  
  var url = "https://www.choozmo.com:8887/reset_pwd";

var xhr = new XMLHttpRequest();
xhr.open("POST", url);

xhr.setRequestHeader("accept", "application/json");
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onreadystatechange = function () {
   if (xhr.readyState === 4) {
      alert('重設成功')
   }};


var data = `{"code":"`+ code+`","password":"`+pwd+`"}`

xhr.send(data);
});

var loaded_data = ''
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.querySelector('.loader').style.display = "block";
  let token = getCookie('jwt_token');
  axios({
    method: 'post',
    url: 'https://www.choozmo.com:8887/history_input',
    headers: { 
        'accept': 'application/json',
        'Authorization': `Bearer ${token}`
     }
  }).then(res => {
    console.log(res.data);
    loaded_data = res.data;
    var historyList = document.querySelector('.historyList');
    historyList.innerHTML = '';
    for (var obj of loaded_data) {
      var list = document.createElement('li');
      list.id = obj.id;
      // div-imgfr
      var divImgfr = document.createElement('div');
      divImgfr.classList.add('item_imgfr');
      var img = document.createElement('img');
      img.setAttribute('src', obj['image_urls'][0]);
      divImgfr.appendChild(img);
      // div-content
      var contentBox = document.createElement('div');
      contentBox.classList.add('content-box');
      var boxTitle = document.createElement('p');
      boxTitle.classList.add('box-title');
      boxTitle.textContent = obj.name;
      boxTitle.id = obj.id;
      boxTitle.setAttribute('onclick', `direct(${obj.id})`);

      var boxLink = document.createElement('span');
      boxLink.classList.add('box-link');
      boxLink.setAttribute("data-url", obj.link);
      boxLink.setAttribute('onclick', 'view()');
      boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
      contentBox.appendChild(boxTitle);
      contentBox.appendChild(boxLink);
      list.classList.add("historyList-item");
      list.setAttribute('onclick', `direct(${obj.id})`);
      list.appendChild(divImgfr);
      list.appendChild(contentBox);
      historyList.appendChild(list);
    }
    document.querySelector('.loader').style.display = "none";
  
  }).catch(err => {
    console.log(err);
  });
}

function direct(id) {
    location.href = `make_video2.html?id=${id}`;
}

function view() {
    event.stopPropagation();
    console.log(event.target);
    if (event.target.nodeName === 'I') {
      return;
    } else {
      window.open(`http://${event.target.dataset.url}`, '_blank');
    }
  }