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>`;
            $('.card-profile').html(str);
    }).catch(err => {
        console.log(err);
    })
}

renderView();

renderHistoryList();

function renderHistoryList() {
    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);
    const history = res.data;
    let str = '';
    for(let i = 0;i < history.length;i++){
    str += `<div class="historyList-item row">
                  <div class="col-3">
                      <div class="listimg__fr"><img src="${history[i]['image_urls'][0]}" alt="${history[i].name}"></div>
                  </div>
                  <div class="col-6">
                      <p class="my-3">${history[i].name}</p>
                  </div>
                  <div class="col-3 d-flex align-items-center">
                      <span onlick="view()" data-vlink="${history[i].link}"><i class="fas fa-play-circle me-1"></i>觀看影片</span>
                  </div>
              </div>`
    }
    $('#content_block .col-12').html(str);
  }).catch(err => {
    console.log(err);
  });
}

function view() {
    window.open(`http://${event.target.data.vlink}`, '_blank');
    console.log("link view");
  }

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