$('body').css( "margin", "20px" );
$('body').css( "padding", "20px" );


var userName ='therock';

var followerCount,followingCount,friendCount,heart,heartCount,videoCount,url;

document.write ( '<h1 style="text-transform: capitalize;" >tik tok profiles</h1 >');

document.write ( ` 
 <style>
        table {
            width: 50%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>

<div id=userNameDiv> UserName: 
	<input    style='width:25vw;'    maxlength='2000'   NAME="userName"    id="userName"       VALUE='' >  
	<button  for ='userName' onclick='getDetails();'  class=ab-normbutton >search profile</button>
</div>
<div id = 'detailsTable' style = 'display:none;position:absolute'>
    <img id = "imgUrl" src='' alt="${userName}" width="250" height="250" style=" border-radius: 130px; position: relative; left: 411px; top: 31px; " >
<table style=" position: relative; bottom: 234px; "><tr><th>UserName</th><td id="userName1">${userName}</td></tr><tr><th>followerCount</th><td id="followerCount" class="val">${followerCount}</td></tr><tr><th>followingCount</th><td id="followingCount" class="val">${followingCount}</td></tr><tr><th>friendCount</th><td id="friendCount" class="val">${friendCount}</td></tr><tr><th>heart</th><td id="heart" class="val">${heart}</td></tr><tr><th>heartCount</th><td id="heartCount" class="val">${heartCount}</td></tr><tr><th>videoCount</th><td id="videoCount" class="val">${videoCount}</td></tr>
<!--<tr><th>url</th><td id="url"><a href= ""${url}>@${url}</a></td></tr> -->
</table>

</div>


` );

function getDetails(){
   const  name = document.getElementById('userName').value;
   
  // setData(record)
   
   
    if(name != ''){
        fetchNBAData(name);
       // setData(record)
    }
    else{ 
        fetchNBAData(userName);
        
    }
}

async function fetchNBAData(name) {
   console.log(name)
    const url = 'https://tiktok82.p.rapidapi.com/getProfile?username='+userName;
const options = {
	method: 'GET',
	headers: {
		'X-RapidAPI-Key': '3fb08ca09fmsh485bfcd8f55dc94p17a666jsncb30096676f9',
		'X-RapidAPI-Host': 'tiktok82.p.rapidapi.com'
	}
};

try {
	const response = await fetch(url, options);
	const result = await response.text();
	console.log(result);
} catch (error) {
	console.error(error);
}

try {
    
      const response = await fetch(url, options);
        console.log(response);
    
     const record = await response.json();
     console.log(record);
      setData(record)
	
} catch (error) {
	console.error(error);
}

}

function setData(record){
    

    
    var test = document.querySelectorAll(".val");
    
    document.getElementById('userName1').innerHTML =   record.data.user.uniqueId;
     document.getElementById(test[0].id).innerHTML =   record.data.stats.followerCount;
    document.getElementById(test[1].id).innerHTML =  record.data.stats.followingCount;
    document.getElementById(test[2].id).innerHTML =  record.data.stats.friendCount;
   document.getElementById(test[3].id).innerHTML =  record.data.stats.heart;
    document.getElementById(test[4].id).innerHTML=  record.data.stats.heartCount;
    document.getElementById(test[5].id).innerHTML =  record.data.stats.videoCount;
    var x = document.getElementById("imgUrl")
    x.setAttribute("src", record.data.user.avatarMedium);
    
    document.getElementById("detailsTable").style.display = "block";
    
}

//fetchNBAData();