import { getCookie, getHumanReadableFileSize, round } from '../tools/main.js';

const loadDashboard = async function () {
    let success = true;
    const body = {
        'request-data': [
            {
                db: 'users/personal_data/profile',
                cols: [
                    'ln',
                    'fn',
                    'by',
                    'bm',
                    'bd'
                ],
                table: 'data'
            },
            {
                db: 'users/storage',
                cols: [
                    'used'
                ],
                table: 'storage'
            },
            {
                db: 'users/personal_data/settings',
                cols: [
                    'si'
                ],
                table: 'personalization'
            }
        ]
    };
    await fetch(`https://jcloud-services.ddns.net:1024/users/${getCookie('User')}/data/query`, {
        credentials: 'include',
        headers: {
            'Content-Type': 'application/json'
        },
        method: 'POST',
        body: JSON.stringify(body)
    })
    .then(async response => {
        if (response.status === 200) {
            const result = (await response.json());
            const totalStorage = 16000000000;
            document.querySelector('#user-details-your-data-email').textContent = getCookie('User');
            document.querySelector('#user-details-your-data-name').textContent = result[0].data[1] + ' ' + result[0].data[0];
            document.querySelector('#user-details-your-data-age').textContent = Math.floor((new Date - new Date(result[0].data[2], result[0].data[3], result[0].data[4])) / 31536000000);
            document.querySelector('#user-details-storage-used').textContent = getHumanReadableFileSize(result[1].data[0], 2);
            document.querySelector('#user-details-storage-total').textContent = getHumanReadableFileSize(totalStorage, 0);
            document.querySelector('#user-details-storage-used-percent').textContent = round((result[1].data[0] / totalStorage) * 100, 1);
            document.querySelector('#user-details-storage-used_drive').style.width = (result[1].data[0] / totalStorage) * 100 + '%';
            const dashboardItems = result[2].data[0];
            console.log('dashboardItems:', dashboardItems)
            const dashboardItemsContainer = document.querySelector('#home-page-items');
            console.log(dashboardItemsContainer)
            for (let item of dashboardItems) {
                const itemElement = document.createElement('div');
                itemElement.classList.add('home-page-item');
                itemElement.classList.add('home-page-icon');
                if (item.width === 2 && item.height === 2) {
                    itemElement.classList.add('normal-home-page-widget');
                    console.log('item', item.target, 'is large!')
                } else if (item.width === 4 && item.height === 2) {
                    itemElement.classList.add('large-home-page-widget');
                    console.log('item', item.target, 'is very large!')
                } else if (item.width === 4 && item.height === 4) {
                    itemElement.classList.add('very-large-home-page-widget');
                    console.log('item', item.target, 'is very large!')
                } else {
                    itemElement.classList.add('normal-home-page-icon');
                    console.log('item', item.target, 'is normal!')
                };
                itemElement.style.gridArea = `${item.y + 1} / ${item.x + 1} / ${item.y + item.height} / ${item.x + item.width} `;
                itemElement.style.fontSize = '10px';
                console.log(itemElement)
                dashboardItemsContainer.appendChild(itemElement);
            };
        } else {
            success = false;
        };
    })
    .catch(err => {
        success = false;
        console.error(err);
    });
};

export { loadDashboard };