const btnLoginPage = document.querySelector('.btn-login');
const sender = document.querySelector('.sender');
let language = localStorage.getItem('lan');

function loginControl() {
  btnLoginPage.style.display = 'block';
}

loginControl();

function get_jwt_token(){
  jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0];
  if(!jwt_raw) {return}
  return jwt_raw.split('=')[1];
}

function checkToken() {
  let jwt_token = get_jwt_token();
}

checkToken();


$(".sender").click(function () {
  sender.setAttribute('disabled', '');
  sender.value = '處理中';
  if(language == 'en') {
    sender.value = 'Processing';
  }
  setTimeout(function () {
    sender.removeAttribute('disabled')
    sender.value = '送出';
    if(language == 'en') {
      sender.value = 'Submit';
    }
  }, 10000);
  console.log('clicked')
  var email = $("#in_email").val()
  var url = "https://www.choozmo.com:8887/send_reset_pwd?user_id=-1&email="+email;

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

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

  xhr.onreadystatechange = function () {
   if (xhr.readyState === 4) {
    let title = '請查看信箱';
    if(language == 'en') {
      title = 'Please chek your email box';
    }
    Swal.fire({
      title: title,
      icon: 'info',
      confirmButtonColor: '#3085d6',
    });
   }};

xhr.send();

});

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');
  }
}

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');
    }
}