const btnLoginPage = document.querySelector('.btn-login');
const btnUserProfile = document.querySelector('.btn-userProfile');
const btnLogout = document.querySelector('.btn-logout');

function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
  }

let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];

function checkLocal() {
  if(userBasics.length == 0){ return };
  $('.userName').html(`<h2 class="user-name text-white mt-4 fw-bold">Hello,${userBasics.user_info.userName}</h2>`);
}

checkLocal()


function renderView() {
    let token = getCookie('jwt_token');
    if(!token) {
        return;
     }
    // axios.defaults.withCredentials = false;
    axios({
        method: 'post',
        url: 'https://www.choozmo.com:8887/user_profile',
        headers: { 
            'accept': 'text/html',
            'Authorization': `Bearer ${token}`
         }
    }).then(res => {
        console.log(res.data);
        const userInfo = res.data;
        localStorage.setItem('user_profile', JSON.stringify(res.data));
          if(userInfo.user_info.left_sec < 20){
            Swal.fire({
                title: "剩餘秒數不足",
                text: '您的影片額度即將不足，加值以持續使用',
                icon: 'warning',
                showCancelButton: true,
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#3085d6',
                confirmButtonText: '加值'
            }).then(result => {
              if (result.isConfirmed) {
                location.href = "pricing.html";
              }
            });
          }
        // const str = `<img src="static/img/undraw_male_avatar_323b.svg" alt="">
        //     <p class="card-profile-txt">User Profile</p>
        //     <p class="card-profile-cnt">${userInfo.user_info.userName}</p>
        //     <p class="card-profile-cnt">${userInfo.user_info.email}</p>
        //     <div class="d-flex justify-content-around">
        //         <div>
        //             <p set-lan="html:used">已使用</p>
        //             <p><strong>${userInfo.user_info.total_sec}</strong><span set-lan="html:sec">秒</span></p>
        //         </div>
        //         <div>
        //             <p set-lan="html:left">未使用</p>
        //             <p><strong>${userInfo.user_info.left_sec}</strong><span set-lan="html:sec">秒</span></p>
        //         </div>
        //     </div>`;
        const str = `<img src="static/img/undraw_male_avatar_323b.svg" alt="">
        <p class="card-profile-txt">User Profile</p>
        <p class="card-profile-cnt">${userInfo.user_info.userName}</p>
        <p class="card-profile-cnt">${userInfo.user_info.email}</p>
        <div class="d-flex justify-content-around">
            <div>
                <p set-lan="html:used">已使用</p>
                <p><strong>${userInfo.user_info.total_sec}</strong><span set-lan="html:sec">秒</span></p>
            </div>
            <div>
                <p set-lan="html:left">未使用</p>
                <p><strong>${userInfo.user_info.left_sec}</strong><span set-lan="html:sec">秒</span></p>
            </div>
        </div>`;
        // 使用者名稱
        const userName = `<h2 class="user-name text-white mt-4 fw-bold">Hello,${userInfo.user_info.userName}</h2>`;
        // 已使用
        const usedtime=`<h1 class="text-center">${userInfo.user_info.total_sec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
        // 未使用
        const NotUsedTime=`<h1  class="text-center">${userInfo.user_info.left_sec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
        // user資訊
        const infContent=`
        <div class="inf-content">
            <p>${userInfo.user_info.userName}</p>
            <p>***************&nbsp;<a href="./reset_pwd_email.html" set-lan="html:resetPsd">更改密碼</a></p>
            <p>${userInfo.user_info.email}</p>
        </div>`;
        // 歷史紀錄
        // const historicalrecord 
        var  historicalrecord=''
        for (var i = 0; i < userInfo.video_info.length; i++) {
            historicalrecord+='\
            <tr>\
            <td class="px-0">'+userInfo.video_info[i].time_stamp+'</td>\
            <td class="px-0">'+userInfo.video_info[i].title+'</td>\
            <td class="px-0 w-25">'+userInfo.video_info[i].duration+'</td>\
          </tr>`\
            ';
         
        }

        $('.historical-content').html(historicalrecord); 
        $('.userinf').html(infContent);
        $('.userName').html(userName);
        $('.used-time').html(usedtime);
        $('.not-used-time').html(NotUsedTime);
        $('.card-profile').html(str);
            $('.card-profile').html(str);
    }).catch(err => {
        console.log(err);
    })
}

renderView();


function getDraft() {
  let token = getCookie('jwt_token');
  axios({
    method: 'post',
    url: 'https://www.choozmo.com:8887/draft_list',
    headers: { 
        'accept': 'application/json',
        'Authorization': `Bearer ${token}`
     }
  }).then(res => {
    console.log(res.data);
    let result = [...res.data];
    let str = '';
    if(result.length > 0){
      for(let i = 0;i < result.length; i++) {
        str += `<tr>
                  <td>${result[i].title}</td>
                  <td>
                  <span class="me-3 draft-content-icon" id="${result[i].id}" onclick="gotoDraft(${result[i].id})">
                    <i class="fas fa-edit"></i>
                    </span>
                    <span class="ms-3 draft-content-icon" id="${result[i].id}" onclick="deleteDraft(${result[i].id})">
                    <i class="fas fa-trash-alt"></i>
                    </span>
                    </td>
                </tr>`
      }
      $('.draft-content').html(str);
    } else {
      str = '<div><h3>目前沒有草稿喔</h3></div>';
      $('.draft-content').html(str); 
    }
  }).catch(err => {
    console.log(err);
  });
}

getDraft();

function checkLogin() {
    let token = getCookie('jwt_token');
    if(token) {
        btnLoginPage.style.display = 'none';
        btnLogout.style.display = 'block';
        btnUserProfile.style.display = 'block';
    } else {
        window.location.href = 'login.html';
        btnLoginPage.style.display = 'block';
        btnLogout.style.display = 'none';
        btnUserProfile.style.display = 'none';
    }
}


checkLogin();
$(".historical-record").hide();

$( ".check-history" ).click(function() {
  $(".historical-record").toggle(150);
  $(".arrowdown").toggleClass("arrowdoup");
  });

$('.draft-table').hide();
$('.draft .arrowdown').click(function() {
    $(".draft-table").toggle(150);
    $(".draft .arrowdown").toggleClass("arrowdoup");
});

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;
    for (var obj of loaded_data) {
      var historyList = document.querySelector('.historyList');
      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_video.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');
    }
  }

function gotoDraft (id) {
  location.href = `make_video.html?draftid=${id}`;
}
function deleteDraft(id) {
  let token = getCookie('jwt_token');
  axios({
    method: 'post',
    url: 'https://www.choozmo.com:8887/del_draft',
    headers: { 
        'accept': 'application/json',
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
    },
    data: { "id": id }
  }).then(res => {
    console.log(res.data);
    getDraft();
  }).catch(err => {
    console.log(err);
  });
}