// ### updating serial numbers on the fly
let ath_card_serial_span = document.querySelectorAll('.sc-card-serial-span');

ath_card_serial_span.forEach((item, i) => {
    item.innerHTML = i + 1;
});

// ### full page screenshot
function takePageScreenshot() {

    const page = document.querySelector('#screen');
    const hasChart = document.querySelector('.has-chart');

    // const sizes = ['600', '1200', '1800'];

    const size = { width: 1200, height: 900 };

    // hasChart ? sizes.shift() : '';

    for (let i = 0; i < 3; i++) {
        page.classList.add('taking-screenshot');

        const options = {
            windowWidth: size.width,
            windowHeight: size.height,
            allowTaint: true,
            scale: i + 1,
            imageTimeout: 0
        };

        html2canvas(page, options)
            .then(canvas => {
                page.classList.remove('taking-screenshot');
                const imgName = `Satoshi Club ${getFormattedTodayDate()} x${i + 1}.png`
                const downloadLink = document.createElement('a');
                downloadLink.setAttribute('download', imgName);
                canvas.toBlob(function (blob) {
                    const url = URL.createObjectURL(blob);
                    downloadLink.setAttribute('href', url);
                    downloadLink.click();
                    downloadLink.remove();
                });
            });
    }

    // sizes.forEach((size, index) => {
    //     page.classList.add('taking-screenshot');

    //     const options = {
    //         // windowWidth: size,
    //         widht: size.width,
    //         height: size.height,
    //         allowTaint: true,
    //         scale: 2,
    //         imageTimeout: 0
    //     };

    //     html2canvas(page, options)
    //         .then(canvas => {
    //             page.classList.remove('taking-screenshot');
    //             const imgName = `Satoshi Club ${getFormattedTodayDate()} x${index + 1}.png`
    //             const downloadLink = document.createElement('a');
    //             downloadLink.setAttribute('download', imgName);
    //             canvas.toBlob(function (blob) {
    //                 const url = URL.createObjectURL(blob);
    //                 downloadLink.setAttribute('href', url);
    //                 downloadLink.click();
    //                 downloadLink.remove();
    //             });
    //         });
    // })
}

function getFormattedTodayDate(layout) {
    let monthArray = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
    let d = new Date().toISOString();
    let month = '' + (layout ? monthArray[d.slice(5, 7) - 1] : d.slice(5, 7));
    let day = '' + d.slice(8, 10);
    let year = d.slice(0, 4);

    if (month.length < 2) { month = '0' + month }
    if (day.length < 2) { day = '0' + day }

    return layout ? [day, month, year].join(' ') : [year, month, day].join('-');
}

// ### ATH VS ATLOW PAGES' BAR-LINE VALUE-LABEL (If the line percentage exceeds 80%, it should change it's shape so it won't overlap the next column)

let at_low_bar = document.querySelectorAll('.at-low--bar');

at_low_bar.forEach((item, i) => {
    let ava_value_label = item.querySelector('.value-label');
    let bar_line = item.querySelector('.bar-line');
    let point_down_triangle_main = item.querySelector('.point-down-triangle-main');

    let percentage = bar_line.getAttribute('style').replace('width: ', '').replace('%', '');

    if (percentage > 80) {
        ava_value_label.style.right = '-14px';
        point_down_triangle_main.style.justifyContent = 'flex-end';
        point_down_triangle_main.style.marginRight = '-10px';
    }
});
