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

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;
        // 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;">秒</span></h1>`;
        // 未使用
        const NotUsedTime=`<h1  class="text-center">${userInfo.user_info.left_sec}&ensp;<span style="font-size:15px;">秒</span></h1>`;
        // user資訊
        const infContent=`
        <div class="inf-content">
            <p>${userInfo.user_info.userName}</p>
            <p>***************&nbsp;<a href="">更改密碼</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 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();
  $(".arrowdown").toggleClass("arrowdoup");
  });