importAPI.js

import { getChanelHandle } from './main.js';
import { getChanelData } from './main.js'


const channelInfo = document.getElementById('info');
const infoOutput = document.getElementById('infoOutput');
const videos = document.getElementById('videos');
const videosOutput = document.getElementById('videosOutput');


async function _api() {

    const apiKey = `AIzaSyDBidvfGtorU2Z4tO2cRD3k1vangNMLxTQ`;
    // const channelID = `UCwx6obo2IHqoCWcdVCiyZFA`;
    const channelID = await getChanelHandle();
    const url = `https://www.googleapis.com/youtube/v3/channels?part=snippet,statistics&id=${channelID}&key=${apiKey}`
    // const thumbnailUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=CHANNEL_ID&maxResults=10&order=date&type=video&key=${apiKey}`
    
    try {
        const respone = await fetch(url);
        const data = await respone.json();
        // const date = data.items[0].snippet.publishedAt;
        // const date = getChanelData.snippet.publishedAt
        // const d = new Date(date);

        if(!respone.ok) {
            throw new Error(`Respons Status: ${respone.status}`)
        }

        channelInfo.addEventListener('click', () => {

            infoOutput.style.display = 'block';
            videosOutput.style.display = 'none';

            infoOutput.innerHTML = '';

            const containerBox = document.createElement('div');
            containerBox.style.display = 'flex';
            containerBox.style.alignItems = 'center';
            containerBox.style.gap = '8px';
            
            const label = document.createElement('span');
            label.textContent = 'Profile: ';
            label.style.fontWeight = 'bolder'

            const imgUrl = data.items[0].snippet.thumbnails.default.url;
            const profile = document.createElement('img');
            profile.src = imgUrl;
            profile.alt = 'Channel Profile Image';
            profile.width = 50;
            profile.height = 50;
            profile.style.borderRadius = '50%'

            containerBox.appendChild(label);
            containerBox.appendChild(profile);
            infoOutput.appendChild(containerBox);


            const name = document.createElement('p');
            const cName = document.createElement('span');
            cName.textContent = 'Channel Name: ';
            cName.style.fontWeight = 'bolder';
            const channelNameText = document.createTextNode(data.items[0].snippet.title);
            name.appendChild(cName);
            name.appendChild(channelNameText);

            infoOutput.appendChild(name);


            const username = document.createElement('p');
            const cUsername = document.createElement('span');
            cUsername.textContent = 'Channel Username: ';
            cUsername.style.fontWeight = 'bolder';
            const channelUsernameText = document.createTextNode(data.items[0]. snippet.customUrl);
            username.appendChild(cUsername);
            username.appendChild(channelUsernameText);

            infoOutput.appendChild(username);


            const subs = document.createElement('p');
            const cSubs = document.createElement('span');
            cSubs.textContent = 'Number of Subscribers: ';
            cSubs.style.fontWeight = 'bolder';
            const channelSubscribers = document.createTextNode(data.items[0].statistics.subscriberCount);
            subs.appendChild(cSubs);
            subs.appendChild(channelSubscribers);

            infoOutput.appendChild(subs);


            const vids = document.createElement('p');
            const cVideos = document.createElement('span');
            cVideos.textContent = 'Number Of Videos: ';
            cVideos.style.fontWeight = 'bolder';
            const channelVideos = document.createTextNode(data.items[0].statistics.videoCount);
            vids.appendChild(cVideos);
            vids.appendChild(channelVideos);

            infoOutput.appendChild(vids);

            const views = document.createElement('p');
            const cViews = document.createElement('span');
            cViews.textContent = 'Total Views: ';
            cViews.style.fontWeight = 'bolder';
            const channelVideoViews = document.createTextNode(data.items[0].statistics.viewCount);
            views.appendChild(cViews);
            views.appendChild(channelVideoViews);

            infoOutput.appendChild(views);

            const published = document.createElement('p');
            const cPublished = document.createElement('span');
            const date = new Date(data.items[0].snippet.publishedAt);
            cPublished.textContent = 'Published: ';
            cPublished.style.fontWeight = 'bolder';

            const ChannelPublishedDate = document.createTextNode(date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }));


            published.appendChild(cPublished);
            published.appendChild(ChannelPublishedDate);
            
            infoOutput.appendChild(published);


        });

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

        async function imgAPI() {
            const apiKey = 'AIzaSyDBidvfGtorU2Z4tO2cRD3k1vangNMLxTQ';
            // const channelID = 'UCwx6obo2IHqoCWcdVCiyZFA';
            const channelID = await getChanelHandle()
            const maxResults = 50;

            let nextPageToken = '';
            let totalVideos = 0;

            videosOutput.innerHTML = '';

            try {
                do {
                    const url = `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${channelID}&maxResults=${maxResults}&order=date&type=video&key=${apiKey}${nextPageToken ? `&pageToken=${nextPageToken}` : ''}`;
                    
                    const response = await fetch(url);
                    if (!response.ok) throw new Error(`Response Status: ${response.status}`);
                    
                    const data = await response.json();

                    data.items.forEach(video => {
                        totalVideos++;

                        if (video.snippet?.thumbnails?.default?.url && video.snippet?.title) {
                            const videoContainer = document.createElement('div');
                            videoContainer.style.display = 'flex';
                            videoContainer.style.alignItems = 'center';
                            videoContainer.style.gap = '10px';
                            videoContainer.style.marginBottom = '15px';
                            videoContainer.style.marginLeft = '15px';
                            videoContainer.style.backgroundColor = '#313244';
                            videoContainer.style.borderRadius = '10px';

                            const videoImg = document.createElement('img');
                            videoImg.src = video.snippet.thumbnails.default.url;
                            videoImg.alt = 'Video Thumbnail';
                            videoImg.width = 120;

                            const videoTitle = document.createElement('h3');
                            videoTitle.textContent = video.snippet.title;
                            videoTitle.style.margin = '0';

                            videoContainer.appendChild(videoImg);
                            videoContainer.appendChild(videoTitle);
                            videosOutput.appendChild(videoContainer);
                        }
                    });

                    nextPageToken = data.nextPageToken;

                } while (nextPageToken);

                console.log(`Total Videos Loaded: ${totalVideos}`);
            } catch (error) {
                console.error(`Failed to fetch videos: ${error}`);
            }
        }

        videos.addEventListener('click', () => {
            infoOutput.style.display = 'none';
            videosOutput.style.display = 'block';
            imgAPI();
        });


    }
    catch(error) {
        console.error(error);
    }
}

_api();