const API_KEY = '3d87c9707f96efe2a046e39865b0e84dda8b9c8345d0c22f7f646f4b0d67';
const API_V0 = 'https://api.cryptorank.io/v0/';
const API_V1 = 'https://api.cryptorank.io/v1/';
const container = document.querySelector('#fetchedItems'); // items container
let activeFilter; // market | ath | gainers
let theme; // dark | light
let TOP_COINS = [];
let ACTIVE_PAGE = '';
let ROI_TYPE = '';
let SELECTED_PLATFORMS = [];
let SELECTED_COINS = [];
let ROI_FILTER_TYPE = 'platform';
let TEMP_PLATFORMS = [];
let TEMP_COINS = [];

let ATH_ITEMS = [];
let TOP_GAINERS_ITEMS = [];
let IDO_ITEMS = [];
let IEO_ITEMS = [];

let graphPeriod = 'day'; // day | week
const graphType = 'USD'; // USD | marketCap | volumes

function onFilter(filter) {
    if(filter === activeFilter) return;
    if(!filter) filter = activeFilter;
    activeFilter = filter;
    theme = (filter === 'gainers') ? 'light' : 'dark';

    const FMC = document.querySelector('#filterMarketCap');
    const FATH = document.querySelector('#filterATH');
    const ATHSort = document.querySelector('#ATHSort');
    const ATHFilter = document.querySelector('#athFi');
    const FTG = document.querySelector('#filterGainers');
    const TGSorting = document.querySelector('#topGainers');

    // Remove active class from all filter buttons
    const filters = [FMC, FATH, FTG];
    filters.forEach(i => {
        if(i.classList.contains('active')) i.classList.remove('active');
    })

    // Fetch coins by selected filter
    if(filter === 'market') {
        FMC.classList.add('active'); // Select active filter btn
        TGSorting.classList.add('hidden')
        ATHSort.classList.add('hidden')
        ATHFilter.classList.add('hidden')
        getMarketCap();
        theme = 'dark';
    }
    if(filter === 'ath') {
        FATH.classList.add('active'); // Select active filter btn
        ATHSort.classList.remove('hidden')
        ATHFilter.classList.remove('hidden')
        TGSorting.classList.add('hidden')
        getATH();
        theme = 'dark';
    }
    if(filter === 'gainers') {
        FTG.classList.add('active'); // Select active filter btn
        TGSorting.classList.remove('hidden')
        ATHSort.classList.add('hidden')
        getTopGainers();
    }
}

function getMarketCap(options) {
    ACTIVE_PAGE = 'ATH Reached (marketCap)'
    onShowPreloader();
    getCurrencies(null, options ? 0 : 10)
        .then(async resp => {
            const filteredResp = sortAndFilter(options, resp).slice(0, 10)
            return [
                filteredResp,
                await getCoins(filteredResp.map(item => item.name)),
                await getExchangesByCoin(filteredResp.map(item => item['slug'])),
                await getHistory(filteredResp.map(item => item['slug']))
            ]
        })
        .then(([currencies, coins, exchanges, history]) => {
            TOP_COINS.length = 0;
            TOP_COINS = currencies.map(c => c['slug'])
            onPrepareData(currencies, coins, exchanges, history)
        })
}

function getATH(options) {

    ACTIVE_PAGE = 'ATH Reached';

    onShowPreloader();

    const isSortBy = options && options.sortBy;

    function sortByPrice(a, b) {
        return (a['athPrice']['USD'] === null) - (b['athPrice']['USD'] === null) || + (a['athPrice']['USD'] > b['athPrice']['USD']) || - (a['athPrice']['USD'] < b['athPrice']['USD'])
    }

    function sortByRank(a, b) {
        return (a['rank'] === null) - (b['rank'] === null) || + (a['rank'] > b['rank']) || - (a['rank'] < b['rank'])
    }

    getCoins()
        .then(resp => {
            return sortAndFilter(options, resp)
                .filter(i => i['athPrice'])
                .sort((a,b) => new Date(a.athPrice['date']).getTime() - new Date(b.athPrice['date']).getTime())
                .reverse()
                .filter(i => i.athPrice['date'] === getFormattedTodayDate())
                .sort((a, b) => (!isSortBy || options.sortBy === 'rank') ? sortByRank(a, b) : sortByPrice(a, b))
                .slice(0, 10);
        })
        .then(async resp => {
            return [
                resp,
                await getCurrencies(resp.map(item => item.name)),
                await getExchangesByCoin(resp.map(item => item['key'])),
                await getHistory(resp.map(item => item['key']))
            ]
        })
        .then(([coins, currencies, exchanges, history]) => {
            TOP_COINS.length = 0;
            TOP_COINS = coins.map(c => c['key'])
            const data = coins.map(item => {

                let percentage = currencies.find(c => c.name === item.name) ? item.athPrice['USD'] / currencies.find(c => c.name === item.name).values['USD']['low24h'] : null;
                let dir = currencies.find(c => c.name === item.name) ? Math.sign(item.athPrice['USD'] / currencies.find(c => c.name === item.name).values['USD']['low24h']) : null;

                if(options && options.period === 'percentChange7d') {
                    const min = Math.min.apply(null, history.find(e => e.name === item['key']).values.map(i => i['USD']))
                    percentage = item.athPrice['USD'] / min;
                    dir = Math.sign(item.athPrice['USD'] / min);
                }

                // NEW CALCULATION
                // const percentage = currencies.find(c => c.name === item.name) ? currencies.find(c => c.name === item.name).values['USD']['percentChange24h'] : null;
                // const dir = currencies.find(c => c.name === item.name) ? Math.sign(currencies.find(c => c.name === item.name).values['USD']['percentChange24h']) : null;

                return {
                    coinLogo: item['image'] && item['image']['native'] ? item['image']['native'] : '',
                    ticker: item['symbol'] ? item['symbol'] : '',
                    coinName: item.name ? item.name : 'N/A',
                    marketCap: item.marketCap > 0 ? '$' + convertToAbbreviate(item.marketCap) : 'N/A',
                    percentage: percentage ? (activeFilter === 'ath' ? (percentage * 100 - 100).toFixed(2) : percentage.toFixed(2)) : 'N/A',
                    percentagePeriod: options && options.period === 'percentChange7d' ? '7D' : '24H',
                    direction: (dir && dir === -1) ? 'down' : (dir && dir === 1 ? 'up' : 'na'),
                    athPrice: item.athPrice['USD'] ? convertToCurrency(item.athPrice['USD']) : 'N/A',
                    exchangeLogo: item['key'] ? exchanges.find(e => e.coin === item['key']).logo : '',
                    exchangeName: item['key'] ? exchanges.find(e => e.coin === item['key']).name : '',
                    graphImg: history ? generateSVG(history.find(e => e.name === item['key'])['values'], true) : null
                }
            })

            ATH_ITEMS.length = 0;
            ATH_ITEMS = (!isSortBy || options.sortBy === 'rank') ? data : data.reverse();

            showData((!isSortBy || options.sortBy === 'rank') ? data : data.reverse())
        })
}

function getTopGainers(options) {
    ACTIVE_PAGE = 'TOP Gainers'
    const sortBy = (options && options.sortBy) ? options.sortBy : 'percentChange24h';
    onShowPreloader();

    getCurrencies()
        .then(resp => {
            let filteredResp = resp;

            if(options && options.filters) {
                if (options.filters.marketCap) {
                    const minValue = options.filters.marketCap;
                    filteredResp = filteredResp.filter(i => i['values'] && i['values']['USD'] && i['values']['USD']['marketCap'] > minValue)
                }
                if (options.filters.rank) {
                    const minValue = options.filters.rank;
                    filteredResp = filteredResp.filter(i => i['rank'] && i['rank'] > minValue)
                }
                if (options.filters.volume) {
                    const minValue = options.filters.volume;
                    filteredResp = filteredResp.filter(i => i['values'] && i['values']['USD'] && i['values']['USD']['volume24h'] > minValue)
                }
            }

            return filteredResp
                .filter(i => Math.sign(i['values']['USD'][sortBy]) === 1 || Math.sign(i['values']['USD'][sortBy]) === 0)
                .filter(i => i['values']['USD'][sortBy])
                .sort((a,b) => a['values']['USD'][sortBy] - b['values']['USD'][sortBy])
                .reverse()
                .slice(0,10)
        })
        .then(async resp => {
            return [
                resp,
                await getCoins(resp.map(item => item.name)),
                null,// await getExchangesByCoin(resp.map(item => item['slug'])),
                await getHistory(resp.map(item => item['slug']))
            ]
        })
        .then(([currencies, coins, exchanges, history]) => {
            TOP_COINS.length = 0;
            TOP_COINS = currencies.map(c => c['slug'])
            onPrepareData(currencies, coins, exchanges, history, sortBy)
        })
}

function getROI(type, filter) { // IEO | IDO
    ACTIVE_PAGE = `${type} Return on Investment`;
    ROI_TYPE = type;

    let filterText = 'LAUNCHPAD';
    const LAUNCHPAD = document.querySelector('#launchpad');
    const RAISED = document.querySelector('#raised');
    const LEGEND_1 = document.querySelector('#legend1');
    const LEGEND_2 = document.querySelector('#legend2');

    if(filter && filter === 'raised') {
        RAISED.classList.add('active');
        LAUNCHPAD.classList.remove('active');
        LEGEND_1.innerHTML = 'Current MarketCap';
        LEGEND_2.innerHTML = 'ROI';
        filterText = 'RAISED IN IEO';
    } else {
        LAUNCHPAD.classList.add('active');
        RAISED.classList.remove('active');
        LEGEND_1.innerHTML = 'Current Value';
        LEGEND_2.innerHTML = 'ATH';
        filterText = 'LAUNCHPAD';
    }
    document.querySelector('#tabTitle').innerHTML = filterText;

    const EX_FIELD_NAME = type === 'IEO' ? 'ieoExchangeKey' : 'idoPlatformKey';

    onShowPreloader();
    getCoins()
        .then(async resp => [resp, await getCrowdSales()])
        .then(([coins, crowdSales]) => {
            const CS = [];
            const COINS = [];
            const PLATFORMS = [];
            const PLATFORMS_NAMES = [];

            let PLATFORMS_EXCHANGES_LIST = [];

            Object.keys(crowdSales).forEach(name => {
                const coin = coins.find(c => c.key === name);
                if(coin['price'] && coin['price']['USD'] && coin['athPrice'] && coin['athPrice']['USD']) {
                    crowdSales[name].forEach(i => {
                        if(i['type'] === type && i['price'] && i['price']['USD'] && i[EX_FIELD_NAME]){
                            if(i[EX_FIELD_NAME] && !PLATFORMS_NAMES.includes(i[EX_FIELD_NAME])) {
                                PLATFORMS_NAMES.push(i[EX_FIELD_NAME])
                            }
                            CS.push({
                                image: coin['image'],
                                key: coin['key'],
                                symbol: coin['symbol'],
                                name: coin['name'],
                                ROI: (coin['price']['USD'] - i['price']['USD']) / i['price']['USD'] * 100,
                                ATH_ROI: (coin['athPrice']['USD'] - i['price']['USD']) / i['price']['USD'] * 100,
                                raised: i['raised'] && i['raised']['USD'] ? convertToCurrency(i['raised']['USD']) : 'N/A',
                                exchangeKey: i[EX_FIELD_NAME],
                                mc: coin['marketCap'] > 0 ? coin['marketCap'] : null,
                                marketCap: coin['marketCap'] === 0 ? 'N/A' : (coin['marketCap'] > 0 ? '$' + convertToAbbreviate(coin['marketCap']) : 'N/A'),
                            })
                        }
                    })
                }
            })

            let TOP = [];

            if(filter && filter === 'raised') {
                TOP.length = 0;
                TOP = CS.sort((a, b) => ((a && a['mc']) > (b && b['mc'])) ? 1 : -1).reverse();
            } else {
                TOP.length = 0;
                TOP = CS.sort((a, b) => ((a && a['ROI']) > (b && b['ROI'])) ? 1 : -1).reverse();
            }



            if (type === 'IEO') {
                CS.forEach(i => {
                    if(!COINS.find(c => c.key === i['key'])) {
                        COINS.push({ key: i['key'], name: i['name'], logo: i['image'] });
                    }
                })
            }

            if(ROI_FILTER_TYPE === 'platform' && SELECTED_PLATFORMS.length > 0) {
                document.querySelector('#filters').classList.add('hidden');
                TOP = TOP.filter(i => SELECTED_PLATFORMS.indexOf(i['exchangeKey']) > -1)
            }
            if(ROI_FILTER_TYPE === 'coin' && SELECTED_COINS.length > 0) {
                document.querySelector('#filters').classList.add('hidden');
                TOP = TOP.filter(i => SELECTED_COINS.indexOf(i['key']) > -1)
            }
            
            if(SELECTED_PLATFORMS.length < 1 && SELECTED_COINS.length < 1) {
                document.querySelector('#filters').classList.remove('hidden');
            }

            TOP = TOP.slice(0, 10);

            TOP_COINS.length = 0;
            TOP_COINS = TOP.map(c => c.key)

            if(type === 'IEO') {
                getExchangesList().then(async resp => {
                    PLATFORMS_EXCHANGES_LIST = resp;
                    await showData();
                })
            }

            if(type === 'IDO') {
                getIDOPlatforms().then(async resp => {
                    PLATFORMS_EXCHANGES_LIST = resp;
                    await showData();
                })
            }

            function capFirstLetter(str) {
                separateWord = str.split('-');
                for (var i = 0; i < separateWord.length; i++) {
                    separateWord[i] = separateWord[i].charAt(0).toUpperCase() +
                        separateWord[i].substring(1);
                }
                return separateWord.join(' ');
            }

            function showData() {
                TOP.forEach(item => {
                    const z = PLATFORMS_EXCHANGES_LIST.find(e => e.key === item.exchangeKey);
                    item.exchangeName = z ? z['name'] : capFirstLetter(item.exchangeKey);
                    item.exchangeLogo = z ? z['icon'] : 'https://esatoshi.club/admin/sys/up-svg/images/web-icon-light.svg';
                })

                PLATFORMS_NAMES.forEach(platform => {
                    let temp = PLATFORMS_EXCHANGES_LIST.find(e => e.key === platform)
                    if(temp) { PLATFORMS.push({ key: temp['key'], name: temp['name'], logo: temp['icon'] })}
                })

                const platformsWrapper = document.querySelector('#platforms');

                platformsWrapper.innerHTML =
                    PLATFORMS
                        .sort((a, b) => ((a && a['name']) > (b && b['name'])) ? 1 : -1)
                        .map((item, index) => {
                            return `    
                        <div class="${TEMP_PLATFORMS.includes(item['key']) ? 'platform selected' : 'platform'}" 
                             id="platform${index + 1}" 
                             onclick="onTogglePlatform('${item['key']}', 'platform' + ${index + 1})">
                            <img src="${item['logo']}" alt="" class="platform__logo">
                            <p class="platform__name">${item['name']}</p>
                            <span class="platform__key" style="display: none">${item['key']}</span>
                        </div>
                    `;}).join("");

                if (type === 'IEO') {
                    const coinsWrapper = document.querySelector('#coins');

                    coinsWrapper.innerHTML =
                        COINS
                            .sort((a, b) => ((a && a['name']) > (b && b['name'])) ? 1 : -1)
                            .map((item, index) => {
                                return `    
                        <div class="${TEMP_COINS.includes(item['key']) ? 'coin selected' : 'coin'}" 
                             id="coin${index + 1}" 
                             onclick="onTogglePlatform('${item['key']}', 'coin' + ${index + 1})">
                            <img src="${item['logo']['native']}" alt="" class="coin__logo">
                            <p class="coin__name">${item['name']}</p>
                            <span class="coin__key" style="display: none">${item['key']}</span>
                        </div>
                    `;}).join("");
                }

                if(type === 'IEO') {
                    if(SELECTED_PLATFORMS.length === 1 ) {
                        document.querySelector('#iooTitle').innerHTML = TOP[0]['exchangeName'] + " IEO's";
                        document.querySelector('#iooLogo').innerHTML = `<img src="${TOP[0]['exchangeLogo'].replace('/icon.', '/')}" alt="" style="user-select: auto;" className="should-be-updated">`;
                    } else {
                        document.querySelector('#iooTitle').innerHTML = "IEO";
                        document.querySelector('#iooLogo').innerHTML = "";
                    }
                }


                if(type === 'IDO') {
                    if(SELECTED_PLATFORMS.length === 1 ) {
                        document.querySelector('#iooTitle').innerHTML = TOP[0]['exchangeName'] + " IDO's";
                        document.querySelector('#iooLogo').innerHTML = `<img src="${TOP[0]['exchangeLogo'].replace('/icon.', '/')}" alt="" style="user-select: auto;" className="should-be-updated">`;
                    } else {
                        document.querySelector('#iooTitle').innerHTML = "IDO";
                        document.querySelector('#iooLogo').innerHTML = "";
                    }
                }

                // Table title updated for marketcup
                document.querySelector('#tabTitle').innerHTML = SELECTED_PLATFORMS.length > 0 ? "Market Cap" : (type === 'IEO' ? filterText : "PLATFORM");

                if(ACTIVE_PAGE === 'IDO Return on Investment'){
                    IDO_ITEMS.length = 0;
                    IDO_ITEMS = TOP;
                }
                if(ACTIVE_PAGE === 'IEO Return on Investment'){
                    IEO_ITEMS.length = 0;
                    IEO_ITEMS = TOP;
                }

                container.innerHTML = TOP.map((item, index) => {
                    return `
                        <tr>
                            <td>${index + 1}</td>
                            <td>
                                <div class="sc-coin-label" style="user-select: auto;">
                                    <div class="sc-coin-logo" style="user-select: auto;">
                                        <img src="${item['image']['native']}" alt="" style="user-select: auto;" class="should-be-updated">
                                    </div>
                                    <div class="sc-coin-name" style="user-select: auto;">
                                        <div class="sc-coin-shortname" style="user-select: auto;"><span class="accent-color" style="user-select: auto;">${item['symbol']}</span></div>
                                        <div class="sc-coin-fullname opacity-6" style="user-select: auto;">${item['name']}</div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="${SELECTED_PLATFORMS.length > 0 || (filter && filter === 'raised') ? "d-none" : "ieo-topexchange"}">
                                    <span><img src="${item['exchangeLogo']}" alt="" class="should-be-updated"></span>${item['exchangeName']}
                                </div>
                                <div class="${SELECTED_PLATFORMS.length < 1 || (filter && filter === 'raised') ? "d-none" : "ieo-marketcap"}">
                                    <span>${item['marketCap']}
                                </div>
                                <div class="${(!filter || filter !== 'raised') ? "d-none" : "ieo-marketcap"}">
                                    <span>${item['raised']}
                                </div>
                            </td>
                            <td class="${item['ROI'] / (item['ATH_ROI'] / 100) > 80 ? 'ieo-chart-td ieo-chart-td_long' : item['ROI'] / (item['ATH_ROI'] / 100) < 0 ? 'ieo-chart-td ieo-chart-td_minus' : 'ieo-chart-td'}">
                                <div style="display: flex; width: 100%; position: relative">
                                    <div class="ieo-chartline ieo-currentvalue-chartline ${(item['ROI'] / (item['ATH_ROI'] / 100)) > 10 ? '' : (item['ROI'] / (item['ATH_ROI'] / 100)) > 3 ? 'ieo-minus_l' : 'ieo-minus'}" 
                                        style="width: ${item['ROI'] / (item['ATH_ROI'] / 100) > 0 ? item['ROI'] / (item['ATH_ROI'] / 100) : 0}%;">
                                        <span class="ieo-chart-label">${filter && filter === 'raised' ? item['marketCap'] : item['ROI'].toFixed(2) + '%'}</span>
                                    </div>
                                    <div class="ieo-chartline ieo-ath-chartline" style="width: ${100 - item['ROI'] / (item['ATH_ROI'] / 100)}%;">
                                        <span class="ieo-chart-label">${(filter && filter === 'raised' ? item['ROI'] : item['ATH_ROI']).toFixed(2)}%</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    `
                }).join("");

                updateImages();
            }

        })
}

function getAVA() {
    ACTIVE_PAGE = 'ATH vs AT Low';

    onShowPreloader();

    function sortByRank(a, b) {
        return (a['rank'] === null) - (b['rank'] === null) || + (a['rank'] > b['rank']) || - (a['rank'] < b['rank'])
    }

    getCoins()
        .then(resp => {
            return resp
                .filter(i => i['athPrice'])
                .sort((a, b) => sortByRank(a, b))
                .slice(0, 10);
        })
        .then(async resp => {
            resp.forEach(i => console.log(i))
            return [
                resp,
                await getCurrencies(resp.map(item => item.name)),
                await getExchangesByCoin(resp.map(item => item['key']))
            ]
        })
        .then(([coins, currencies, exchanges]) => {
            TOP_COINS.length = 0;
            TOP_COINS = coins.map(c => c['key'])
            const data = coins.map(item => {
                let percentage = currencies.find(c => c.name === item.name) ? item.athPrice['USD'] / currencies.find(c => c.name === item.name).values['USD']['low24h'] : null;
                let dir = currencies.find(c => c.name === item.name) ? Math.sign(item.athPrice['USD'] / currencies.find(c => c.name === item.name).values['USD']['low24h']) : null;

                return {
                    coinLogo: item['image'] && item['image']['native'] ? item['image']['native'] : '',
                    ticker: item['symbol'] ? item['symbol'] : '',
                    coinName: item.name ? item.name : 'N/A',
                    marketCap: item.marketCap > 0 ? '$' + convertToAbbreviate(item.marketCap) : 'N/A',
                    percentage: percentage ? (activeFilter === 'ath' ? (percentage * 100 - 100).toFixed(2) : percentage.toFixed(2)) : 'N/A',
                    direction: (dir && dir === -1) ? 'down' : (dir && dir === 1 ? 'up' : 'na'),
                    athPrice: item.athPrice['USD'] ? convertToCurrency(item.athPrice['USD']) : 'N/A',
                    atlPrice: item.atlPrice['USD'] ? convertToCurrency(item.atlPrice['USD']) : 'N/A',
                    atPercentage: ((item.athPrice['USD'] - item.atlPrice['USD']) / item.atlPrice['USD'] * 100).toFixed(),
                    price: item['price']['USD'] ? convertToCurrency(item['price']['USD']) : 'N/A',
                    priceInPercentage: item['price']['USD']/(item.athPrice['USD']/100),
                    exchangeLogo: item['key'] ? exchanges.find(e => e.coin === item['key']).logo : '',
                    exchangeName: item['key'] ? exchanges.find(e => e.coin === item['key']).name : '',
                }
            })
            container.innerHTML = data.map(item => {
                return `
                    <a href="javascript:void(0)">
                        <div class="sc-card ath-card ava-card">
                            <div class="ava-card-body">
                                <div class="ava-card-body-top">
                                    <div class="ava-main-coin">
                                        <span class="ava-card-icon">
                                            <img src="${item['coinLogo']}" alt="" class="should-be-updated">
                                        </span>
                                        <div class="sc-card-heading">
                                            <span class="coin-shortname">${item['ticker']}</span>
                                            <span class="coin-fullname opacity-6">${item['coinName']}</span>
                                        </div>
                                    </div>
                                    <div class="sc-card-info-col">
                                        <div class="sc-info-heading opacity-6">Market Cap</div>
                                        <div class="sc-info-data">${item['marketCap']}</div>
                                    </div>
                                    <div class="sc-card-info-col">
                                        <div class="sc-info-heading opacity-6">Volume 24H</div>
                                        <div class="sc-info-data ath-info-data--24h">
                                            ${item['percentage']}
                                            <img src="./images/${item['direction']}-icon.svg" alt="">
                                        </div>
                                    </div>
                                    <div class="sc-card-info-col">
                                        <div class="sc-info-heading opacity-6">Top Exchange</div>
                                        <div class="sc-info-data sc-info-data--topexchange">
                                            <div class="topexchange-logo">
                                                <img src="${item['exchangeLogo']}" alt="" class="should-be-updated">
                                            </div>
                                            <div class="topexchange-name">${item['exchangeName']}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="sc-card-body-bottom ava-card-body-bottom">
                                    <div class="sc-card-info-col barline-info-col">
                                        <div class="col-info">
                                            <div class="sc-info-heading opacity-6">AT Low</div>
                                            <div class="sc-info-data">${item['atlPrice']}</div>
                                        </div>
                                        <div class="at-low--bar">
                                            <div class="bar-line" 
                                            style="width: ${item['priceInPercentage']}%">
                                                <div class="value-label ava-value-label">
                                                    <span>${item['price']}</span>
                                                    <div class="point-down-triangle-main">
                                                        <div class="point-down-triangle"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="bar-line-full"></div>
                                        </div>
                                    </div>
                                    <div class="sc-card-info-col">
                                        <div class="sc-info-heading opacity-6">AT High</div>
                                        <div class="sc-info-data">${item['athPrice']}</div>
                                    </div>
                                    <div class="sc-card-info-col hvl-roi">
                                        <div class="sc-info-heading opacity-6">High Vs Low ROI</div>
                                        <div class="sc-info-data ath-info-data--24h">
                                            ${item['atPercentage']}&percnt;
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>`;
            }).join("");
            updateImages();
        })
}

function onTogglePlatform(key, id) {

    const el = document.querySelector(`#${id}`);
    const index = ROI_FILTER_TYPE === 'platform' ? TEMP_PLATFORMS.indexOf(key) : TEMP_COINS.indexOf(key);

    if(index > -1) {
        ROI_FILTER_TYPE === 'platform' ? TEMP_PLATFORMS.splice(index, 1) : TEMP_COINS.splice(index, 1);
        el.classList.remove('selected');
    } else {
        ROI_FILTER_TYPE === 'platform' ? TEMP_PLATFORMS.push(key) : TEMP_COINS.push(key)
        el.classList.add('selected');
    }

    filterReset.style.display = (ROI_FILTER_TYPE === 'platform' ? TEMP_PLATFORMS.length > 0 : TEMP_COINS.length > 0) ? 'block' : 'none';
}

function onRoiFilter(type) { // platform | coin
    ROI_FILTER_TYPE = type;

    const platforms = document.querySelector('#platforms');
    const coins = document.querySelector('#coins');

    const filterPlatforms = document.querySelector('#filterPlatform');
    const filterCoins = document.querySelector('#filterCoin');

    platforms.style.display = type === 'platform' ? 'block' : 'none';
    coins.style.display = type === 'coin' ? 'block' : 'none';

    type === 'platform' ? filterPlatforms.classList.add('active') : filterPlatforms.classList.remove('active');
    type === 'coin' ? filterCoins.classList.add('active') : filterCoins.classList.remove('active');
}

function onFilterPlatforms() {
    SELECTED_PLATFORMS.length = 0;
    SELECTED_PLATFORMS = JSON.parse(JSON.stringify(TEMP_PLATFORMS));

    SELECTED_COINS.length = 0;
    SELECTED_COINS = JSON.parse(JSON.stringify(TEMP_COINS));

    getROI(ROI_TYPE);
    onHideFiltersModal();
}

function onPlatformsReset() {
    SELECTED_PLATFORMS.length = 0;
    TEMP_PLATFORMS.length = 0;

    SELECTED_COINS.length = 0;
    TEMP_COINS.length = 0;

    filterToggle.classList.remove('active');

    let platformElems = document.querySelectorAll(".platform");
    let coinsElems = document.querySelectorAll(".coins");

    [].forEach.call(platformElems, function(el) { el.classList.remove("selected"); });
    [].forEach.call(coinsElems, function(el) { el.classList.remove("selected"); });

    onFilterPlatforms();
}

function onPrepareData(currencies, coins, exchanges, history, GPT) {
    const data = currencies.map(item => {
        const percentage = item.values['USD'][GPT ? GPT : 'percentChange24h'];
        let percentagePeriod = '24H';
        const dir = Math.sign(item.values['USD'][GPT? GPT : 'percentChange24h']);
        let athPrice = 0;
        let ATH;

        if(activeFilter === 'gainers') {
            const z = currencies.find(c => c.name === item.name)['values']['USD']['price'];
            ATH = '$' + removeZeroFromTheEnd(z > 1 ? z.toFixed(2) : (z + '').includes('e') ? z.toFixed(20) : z.toPrecision(4))
        } else {
            athPrice = coins.find(c => c.name === item.name).athPrice;
            ATH = athPrice ? convertToCurrency(coins.find(c => c.name === item.name).athPrice['USD']) : 'N/A'
        }

        if(GPT) {
            if(GPT === 'percentChange24h') { percentagePeriod = '24H'}
            if(GPT === 'percentChange7d') { percentagePeriod = '7D'}
            if(GPT === 'percentChange30d') { percentagePeriod = '30D'}
            if(GPT === 'percentChange3m') { percentagePeriod = '3M'}
        }

        return {
            coinLogo: item.images ? item.images['200x200'] : '',
            ticker: item['symbol'] ? item['symbol'] : 'N/A',
            coinName: item.name ? item.name : 'N/A',
            marketCap: item.values['USD'].marketCap === 0 ? 'N/A' : (item.values['USD'].marketCap > 0 ? '$' + convertToAbbreviate(item.values['USD'].marketCap) : 'N/A'),
            percentage: percentage ? (activeFilter === 'ath' ? (percentage * 100 - 100).toFixed(2) : percentage.toFixed(2)) : 'N/A',
            percentagePeriod: percentagePeriod,
            direction: (dir && dir === -1) ? 'down' : (dir && dir === 1 ? 'up' : 'na'),
            athPrice: ATH,
            exchangeLogo: exchanges ? exchanges.find(e => e.coin === item['slug']).logo : '',
            exchangeName: exchanges ? exchanges.find(e => e.coin === item['slug']).name : 'N/A',
            volume: item.values['USD']['volume24h'] && item.values['USD']['volume24h'] > 0 ? '$' + convertToAbbreviate(item.values['USD']['volume24h']) : 'N/A',
            graphImg: history ? generateSVG(history.find(e => e.name === item['slug'])['values']) : null,
        }
    })

    if(ACTIVE_PAGE === 'TOP Gainers') {
        TOP_GAINERS_ITEMS.length = 0;
        TOP_GAINERS_ITEMS = data;
    }

    showData(data)
}

function showData(items) {
    container.innerHTML = items.map((item, index) => {
        return `
        <a href="javascript:void(0)">
            <div class="sc-card ${theme === 'dark' ? 'ath-card' : 'tg-card'}">
                <div class="sc-card-serial">
                    <span class="sc-card-serial-span ${theme === 'dark' ? 'ath' : 'tg'}-card-serial-span">${index +1}</span>
                </div>
                <div class="sc-card-icon">
                    <img src="${item['coinLogo']}" alt="" class="should-be-updated">
                </div>
                <div class="sc-card-body">
                    <div class="sc-card-body-top">
                        <div class="sc-card-heading">
                            <span class="coin-shortname">${item['ticker']}</span>
                            <span class="coin-fullname opacity-${theme === 'dark' ? '6' : '8'}">${item['coinName']}</span>
                        </div>
                        <div class="sc-card-graph">
                            ${item['graphImg'] ? item['graphImg'] : '<img src="../images/graph-img.svg" alt="">'}
                        </div>
                    </div>
                    <div class="sc-card-body-bottom">
                        <div class="sc-card-info-col">
                            <div class="sc-info-heading opacity-${theme === 'dark' ? '6' : '8'}">Market Cap</div>
                            <div class="sc-info-data">${item['marketCap']}</div>
                        </div>
                        <div class="sc-card-info-col">
                            <div class="sc-info-heading opacity-${theme === 'dark' ? '6' : '8'}">
                                ${theme === 'dark' ? 'ATH Price' : 'Price'}
                            </div>
                            <div class="sc-info-data">${item['athPrice']}</div>
                        </div>
                        <div class="sc-card-info-col">
                            <div class="sc-info-heading opacity-${theme === 'dark' ? '6' : '8'}">
                                &percnt;${item['percentagePeriod']}
                            </div>
                            <div class="sc-info-data ${theme === 'dark' ? 'ath' : 'tg'}-info-data--24h_${item['direction']}">
                                ${item['percentage']}%
                                <img src="./images/${item['direction']}-icon.svg" alt="">
                            </div>
                        </div>
                        <div class="sc-card-info-col">
                            <div class="sc-info-heading opacity-${theme === 'dark' ? '6' : '8'}">
                                ${theme === 'dark' ? 'Top Exchange' : 'Volume'}
                            </div>
                            <div class="sc-info-data sc-info-data--topexchange">
                                ${theme === 'dark' ?
            `
                                        <div class="topexchange-logo">
                                            <img src="${item['exchangeLogo']}" alt="" class="should-be-updated">
                                        </div>
                                        <div class="topexchange-name">${item['exchangeName']}</div>
                                    ` : `
                                        ${item.volume}
                                    `}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    `
    }).join("");

    updateImages();
}

function onShowPreloader() {
    document.querySelector('#screenshot').classList.add('hidden');
    container.innerHTML = `<div class="preloader"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>`
}

// Helpers
async function getCoins(currencies) {
    return await fetch(API_V0 + 'coins?locale=en', {method: 'GET'})
        .then(resp => resp.json())
        .then(resp => {
            return currencies ? resp.data.filter(item => !!(currencies.find(c => c === item.name))) : resp.data;
        })
        .catch((error) => {
            console.log(error)
        })
}

async function getCrowdSales() {
    return await fetch(API_V0 + 'coins/crowdsales', {method: 'GET'})
        .then(resp => resp.json())
        .then(resp => resp.data)
        .catch((error) => {
            console.log(error)
        })
}

async function getCurrencies(currencies, limit, sort) {
    const PARAMS = { api_key: API_KEY, limit: limit ? limit : '0', sort: sort ? sort : 'rank', optionalFields: 'images'}
    return await fetch(API_V1 + 'currencies?' + new URLSearchParams(PARAMS), {method: 'GET'})
        .then(resp => resp.json())
        .then(resp => {
            return currencies ? resp.data.filter(item => !!(currencies.find(c => c === item['name']))) : resp.data;
        })
        .catch((error) => {
            console.log(error)
        })
}

async function getExchangesByCoin(coins) {
    let promiseArray = [];
    for (let i = 0; i < coins.length; i++) {
        promiseArray.push(
            fetch(API_V0 + `coins/${coins[i]}/tickers`, {method: 'GET'})
                .then(resp => resp.json())
                .then(resp => {
                    const exchange = resp.data
                        .sort((a, b) => ((a && a['usdVolume']) > (b && b['usdVolume'])) ? 1 : -1)
                        .reverse()[0];
                    return {
                        coin: coins[i],
                        key: exchange['exchangeKey'] ? exchange['exchangeKey'] : 'N/A',
                        name: exchange['exchangeName'] ? exchange['exchangeName'] : 'N/A',
                        logo: exchange['exchangeIcon'] ? exchange['exchangeIcon'] : '',
                        percent: exchange['changePercent'] ? exchange['changePercent'] : ''
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        );
    }
    return Promise.all(promiseArray);
}

async function getExchangesList() {
    return await fetch(API_V0 + `exchanges`, {method: 'GET'})
        .then(resp => resp.json())
        .then(resp => resp)
        .catch((error) => {
            console.log(error)
        })
}

async function getIDOPlatforms() {
    return await fetch(API_V0 + `ido-platforms`, {method: 'GET'})
        .then(resp => resp.json())
        .then(resp => resp.data)
        .catch((error) => {
            console.log(error)
        })
}

async function getHistory(coins) {
    const PARAMS = {
        fromTs: (graphPeriod === 'day' ? dayjs().subtract(1, 'day') : dayjs().subtract(7, 'day')).valueOf(),
        toTs: dayjs().valueOf(),
        interval: graphPeriod === 'day' ? '1h' : '1d'
    };

    let promiseArray = [];
    for (let i = 0; i < coins.length; i++) {
        promiseArray.push(
            fetch(API_V0 + `coins/${coins[i]}/chart/history?` + new URLSearchParams(PARAMS), {method: 'GET'})
                .then(resp => resp.json())
                .then(resp => {
                    const data = {
                        name: coins[i],
                        values: []
                    };
                    for(let j = 0; j < resp.data['dates'].length; j++) {
                        data['values'].push({
                            USD: resp.data['USD'][j],
                            marketCap: resp.data['marketCap'][j],
                            volumes: resp.data['volumes'][j]
                        });
                    }
                    return data;
                })
                .catch((error) => {
                    console.log(error)
                })
        )
    }
    return Promise.all(promiseArray);
}

function convertToCurrency(str) {
    return new Intl.NumberFormat( 'en-US', {style: 'currency', currency: 'USD', maximumFractionDigits: 5}).format(str)
}

function convertToAbbreviate(num) {
    return new Intl.NumberFormat( 'en-US', { maximumFractionDigits: 2,notation: "compact" , compactDisplay: "short" }).format(num)
}

function removeZeroFromTheEnd(num) {
    let localNum = num + '';

    for (let i = 0; i < 30; i++) {
        if(localNum[localNum.length - 1] === '0') {
            localNum = localNum.slice(0, -1)
        } else {
            break;
        }
    }

    return localNum;
}

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

function takePageScreenshot() {
    getTwitterLinks();
    const page = document.querySelector('#screen');
    const sizes = ['600', '1200', '1800'];
    sizes.forEach((size, index) => {
        page.classList.add('taking-screenshot')
        const options = {
            windowWidth: size,
            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 toDataURL(url, callback) {
    let canvas = document.createElement('CANVAS');
    let img = document.createElement('img');
    img.setAttribute('crossorigin', 'anonymous');
    // img.src = 'https://cors-anywhere.herokuapp.com/' + url;
    img.src = 'https://satoshi-cors.herokuapp.com/' + url;

    img.onload = () => {
        canvas.height = img.height;
        canvas.width = img.width;
        let context = canvas.getContext('2d');
        context.drawImage(img, 0, 0);
        let dataURL = canvas.toDataURL('image/png');
        canvas = null;
        callback(dataURL);
    };
}
function updateImages() {
    const images = document.getElementsByClassName("should-be-updated");
    for (let i = 0; i < images.length; i++) {
        toDataURL(images[i].src, dataUrl => {
            return images[i].src = dataUrl
        })
    }
    document.querySelector('#screenshot').classList.remove('hidden');
}
function generateSVG(values, isATH) {
    const data = values.map((val, index) => {
        return { x: index, y: val[graphType] }
    });

    if(isATH) {
        const maxNumber = Math.max.apply(null, data.map(i => i['y']));
        const maxIndex = data.map(i => i['y']).findIndex(i => i === maxNumber);
        data.splice(maxIndex + 1)
    }

    if(data.length === 1) {
        data[0]['x'] = 1;
        data.unshift({x: 0, y: data[0]['y'] / 100 * 90})
    }

    const SVG = {
        height: 38,
        width: 177,
        label: { x: 5, y: 5 },
        outerX: {
            min: data[0].x,
            max: data[data.length - 1].x
        },
        outerY: {
            min: data.reduce((min, p) => p.y < min ? p.y : min, data[0].y),
            max: data.reduce((max, p) => p.y > max ? p.y : max, data[0].y)
        }
    };

    function getX(x) {
        return SVG.label.y + (x / SVG.outerX.max * (SVG.width - SVG.label.y));
    }

    function getY(y) {
        return ((SVG.height - SVG.label.x) * SVG.outerY.max - (SVG.height - SVG.label.x) * y) / (SVG.outerY.max - SVG.outerY.min);
    }

    let path = "M " + getX(data[0].x) + " " + getY(data[0].y) + " ";
    path += data.map((point) =>  "L " + getX(point.x) + " " + getY(point.y) + " ").join("");

    return `
        <svg width="${SVG.width}" height="${SVG.height}" viewBox="0 0 ${SVG.width} ${SVG.height}" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g filter="url(#filter0_d_199_1901)">
            <path d="${path}" stroke="#5DF4B8"/>
            </g>
            <defs>
            <filter id="filter0_d_199_1901" x="0" y="0.463989" width="176.197" height="37.036" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
            <feOffset dy="4"/>
            <feGaussianBlur stdDeviation="2"/>
            <feComposite in2="hardAlpha" operator="out"/>
            <feColorMatrix type="matrix" values="0 0 0 0 0.152941 0 0 0 0 0.192157 0 0 0 0 0.282353 0 0 0 0.4 0"/>
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_199_1901"/>
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_199_1901" result="shape"/>
            </filter>
            </defs>
        </svg>
    `
}
function getTwitterLinks() {
    let promiseArray = [];
    for (let i = 0; i < TOP_COINS.length; i++) {
        promiseArray.push(
            fetch(API_V0 + `coins/${TOP_COINS[i]}`, {method: 'GET'})
                .then(resp => resp.json())
                .then(resp => {
                    const coin = resp['data'];
                    const links = coin['links']
                    return {
                        name: coin['name'],
                        twitterLink: links.find(l => l.type === 'twitter') ? links.find(l => l.type === 'twitter')['value'].replace('https://twitter.com/', '') : 'N/A',
                        symbol: coin['symbol']
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        );
    }
    Promise.all(promiseArray).then(resp => {

        const directions = [];

        if(ACTIVE_PAGE === 'ATH Reached') {
            directions.length = 0;
            ATH_ITEMS.forEach(i => {
                directions.push('- ' + i['percentage'] + '%' + (i['direction'] === 'up' ? '↑' : '↓'))
            });
        }

        if(ACTIVE_PAGE === 'TOP Gainers') {
            directions.length = 0;
            TOP_GAINERS_ITEMS.forEach(i => {
                directions.push('- ' + i['percentage'] + '%' + (i['direction'] === 'up' ? '↑' : '↓'))
            });
        }

        if(ACTIVE_PAGE === 'IDO Return on Investment') {
            directions.length = 0;
            IDO_ITEMS.forEach(i => {
                const z = i['ATH_ROI']
                directions.push((z/100) < 10 ? '- x' + (z/100).toFixed(1) : '- x' + (z/100).toFixed());
            });
        }

        if(ACTIVE_PAGE === 'IEO Return on Investment') {
            directions.length = 0;
            IEO_ITEMS.forEach(i => {
                const z = i['ATH_ROI']
                directions.push((z/100) < 10 ? '- x' + (z/100).toFixed(1) : '- x' + (z/100).toFixed());
            });
        }

        let data = `Twitter Links for ${ACTIVE_PAGE} - ${getFormattedTodayDate()}\n\n`;

        data += 'Project Name:\n'
        resp.forEach((i, index) => { data += `${index + 1}. ${i.name}\n`})

        data += '\n\nTwitter:\n'
        resp.forEach((i, index) => { data += `${i.twitterLink}\n`})

        data += '\n\nProject Symbol:\n'
        resp.forEach((i, index) => { data += `${index + 1}. $${i.symbol} ${directions.length > 0 ? directions[index] : ''} \n`})

        data += '\n' + window.location.href

        const a = document.createElement("a");
        a.href = URL.createObjectURL(new Blob([data], {type: "text/plain"}));
        a.setAttribute("download", `${ACTIVE_PAGE}-twitter-links.txt`);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    });
}

document.querySelector('#date') ? document.querySelector('#date').textContent = getFormattedTodayDate(true) : null; // Display today date


// Sorting logic
let athSort = 'rank';
let topGainersSort = 'percentChange24h'
let marketSort = '';

function onSortATH() {
    filterOptions.sortBy = document.querySelector('#ATHSort').value;
    getATH(filterOptions);
}

function onFilterATH() {
    graphPeriod = 'week';
    filterOptions.period = document.querySelector('#athFi').value;
    getATH(filterOptions);
}

function onSortGainers() {
    filterOptions.sortBy = document.querySelector('#topGainers').value;
    topGainersSort = document.querySelector('#topGainers').value;

    getTopGainers(filterOptions);

    let percentagePeriod = '24H';

    if(filterOptions.sortBy) {
        if(filterOptions.sortBy === 'percentChange24h') { percentagePeriod = '24H'}
        if(filterOptions.sortBy === 'percentChange7d') { percentagePeriod = '7D'}
        if(filterOptions.sortBy === 'percentChange30d') { percentagePeriod = '30D'}
        if(filterOptions.sortBy === 'percentChange3m') { percentagePeriod = '3M'}
    }
    document.querySelector('#period').textContent = percentagePeriod;
}

// Filtration logic
const filterOptions = {
    sortBy: activeFilter === 'ath' ? athSort : (activeFilter === 'gainers' ? topGainersSort : marketSort),
    filters: {
        marketCap: null,
        rank: null,
        volume: null
    }
}
const filterOverlay = document.querySelector('#overlay');
const filterMenu = document.querySelector('#filterMenu');
const filterMarketCap = document.querySelector('#marketCapFilter');
const filterRank = document.querySelector('#rankFilter');
const filterVolume = document.querySelector('#volume24Filter');
const filterReset = document.querySelector('#resetFilters');
const filterToggle = document.querySelector('#filtersToggle');
let isFiltersApplied = false;

function onShowFiltersModal() {
    filterOverlay.style.display = 'block';
    filterMenu.style.display = 'block';

    filterReset.style.display = (ROI_FILTER_TYPE === 'platform' ? TEMP_PLATFORMS.length > 0 : TEMP_COINS.length > 0) ? 'block' : 'none';

    TEMP_PLATFORMS.length = 0;
    TEMP_PLATFORMS = JSON.parse(JSON.stringify(SELECTED_PLATFORMS))

    TEMP_COINS.length = 0;
    TEMP_COINS = JSON.parse(JSON.stringify(SELECTED_COINS))

    let coinsElems = document.querySelectorAll(".coin");
    [].forEach.call(coinsElems, function(el) {
        const platformWrapper = document.querySelector(`#${el.id}`);
        const platform = document.querySelector(`#${el.id} .coin__key`).textContent.trim();
        if(SELECTED_COINS.indexOf(platform) > -1) {
            platformWrapper.classList.add('selected')
        } else {
            platformWrapper.classList.remove('selected')
        }
    });

    let platformsElems = document.querySelectorAll(".platform");
    [].forEach.call(platformsElems, function(el) {
        const platformWrapper = document.querySelector(`#${el.id}`);
        const platform = document.querySelector(`#${el.id} .platform__key`).textContent.trim();
        if(SELECTED_PLATFORMS.indexOf(platform) > -1) {
            platformWrapper.classList.add('selected')
        } else {
            platformWrapper.classList.remove('selected')
        }
    });
}
function onHideFiltersModal() {
    if(!isFiltersApplied) {
        filterMarketCap ? filterMarketCap.value = '' : null;
        filterRank ? filterRank.value = '' : null;
        filterVolume ? filterVolume.value = '' : null;
        filterReset.style.display = 'none';
    }
    filterOverlay.style.display = 'none';
    filterMenu.style.display = 'none';

    TEMP_PLATFORMS.length = 0;
}
function onFiltersApply() {
    const marketCap = Number(filterMarketCap.value);
    const rank = Number(filterRank.value);
    const volume = Number(filterVolume.value);

    if(marketCap || rank || volume) {
        isFiltersApplied = true;
        filterReset.style.display = 'block';
        filterToggle.classList.add('active');

        filterOptions.filters.marketCap = marketCap
        filterOptions.filters.rank = rank
        filterOptions.filters.volume = volume

        if(activeFilter === 'market') {
            getMarketCap(filterOptions);
        }
        if(activeFilter === 'ath') {
            filterOptions.sortBy = athSort;
            getATH(filterOptions);
        }
        if(activeFilter === 'gainers') {
            filterOptions.sortBy = topGainersSort;
            getTopGainers(filterOptions);
        }
    }

    onHideFiltersModal();
}
function filterInputUpdated() {
    const isInputHasValue = !!(Number(filterMarketCap.value) || Number(filterRank.value) || Number(filterVolume.value));
    filterReset.style.display = isInputHasValue ? 'block' : 'none';
}
function onFiltersReset() {
    filterMarketCap.value = '';
    filterRank.value = '';
    filterVolume.value = '';
    filterReset.style.display = 'none';
    filterToggle.classList.remove('active');
    onFilter();
}
function sortAndFilter(options, items) {
    let filteredResp = items;

    if(options && options.sortBy) {
        filteredResp = filteredResp.filter(i => options.sortBy === 'rank' ? i['athPrice'] : i['athPrice'] && i['athPrice']['marketCap'])
    }
    if(options && options.filters) {
        if(options.filters.marketCap) {
            const minValue = options.filters.marketCap;
            filteredResp = filteredResp.filter(i => i['marketCap'] && i['marketCap'] > minValue)
        }
        if(options.filters.rank) {
            const minValue = options.filters.rank;
            filteredResp = filteredResp.filter(i => i['rank'] && i['rank'] > minValue)
        }
        if(options.filters.volume) {
            const minValue = options.filters.volume;
            filteredResp = filteredResp.filter(i => i['volume24h'] && i['volume24h'] > minValue)
        }
    }

    return filteredResp;
}
