const snxjs = synthetix({ newtork: 'mainnet' }); 
const { formatEther, formatUnits, toUtf8String, formatBytes32String } = snxjs.utils;

const loadingGIF = '<img src="https://media.giphy.com/media/TvLuZ00OIADoQ/giphy.gif" width=150 />';
const tableTarget = document.querySelector('table > tbody');

const esLink = ({ txn, address, label, useOvm }) => 
 `<a target="_blank" href="https://${useOvm ? 'optimistic.' : ''}etherscan.io/${txn ? 'tx' : 'address'}/${txn || address}">${label || txn || address}</a>`

const lookup = async ({ useOvm = false }) => {
  try {
    tableTarget.innerHTML = `<tr><td colspan=100>${loadingGIF}</td><tr>`;
    
    const ts = Math.floor(Date.now()/1e3);
    const oneDayAgo = ts - (3600 * 24);

    const synthExchanges = await snxData({ networkId: useOvm ? 10 : 1 }).synthExchanges({ minTimestamp: oneDayAgo });
    
    const exchanges = synthExchanges.map(({ hash, from, fromCurrencyKey, toCurrencyKey, fromAmountInUSD, feesInUSD, fromAmount, block, timestamp, toAddress, gasPrice, date }, i) => {
      
      return {
        hash,
        from,
        fromKey: fromCurrencyKey,
        toKey: toCurrencyKey,
        amount: fromAmount,
        usd: fromAmountInUSD,
        fees: feesInUSD,
        block,
        date: new Date(timestamp),
        account: toAddress,
        gasPrice,
        timestamp
      }
    });
    
    tableTarget.innerHTML = exchanges.map(({ hash, account, from, fromKey, toKey, amount, block, usd, date, gasPrice, fees }) => `
      <tr>
        <td>${esLink({ txn: hash, label: '<img width=24 src="https://etherscan.io/images/favicon2.ico" />', useOvm })}</td>
        <td>${block}</td>
        <td>${esLink({ address: from, label: `${from.slice(0, 6)}...${from.slice(-4)}`, useOvm })}</td>
        <td><img width=32 src="https://raw.githubusercontent.com/Synthetixio/synthetix-assets/master/synths/${fromKey}.svg" />${fromKey}</td>
        <td>${numbro(amount).format('0,0.0000')}</td>
        <td>${numbro(usd).format('$0,0.00')}</td>
        <td><img width=32 src="https://raw.githubusercontent.com/Synthetixio/synthetix-assets/master/synths/${toKey}.svg" />${toKey}</td>
        <td>${numbro(fees).format('$0,0.00')} (${numbro(fees/usd).format('0.00%')})</td>
        <td>${account !== from ? esLink({ address: account, label:  `${account.slice(0, 6)}...${account.slice(-4)}`, useOvm }) : ''}</td>
        <td>${formatUnits(gasPrice, 'gwei')}</td>
        <td class=helper-text style="font-size: 12px;">${date}</td>
      </tr>
    `).join('');
     
    const volume = exchanges.reduce((memo, { usd }) => Number(usd) + memo, 0);
    document.querySelector('#volume var').innerHTML = numbro(volume).format('$0,0.00');
    
    const fees = exchanges.reduce((memo, { fees}) => Number(fees) + memo, 0);
    document.querySelector('#fees var').innerHTML = numbro(fees).format('$0,0.00');
    
    const mean = volume / exchanges.length;
    document.querySelector('#mean var').innerHTML = numbro(mean).format('$0,0.00');
          
    const uniqAccounts = new Set(exchanges.map(({ from }) => from)).size;
    document.querySelector('#accounts var').innerHTML = uniqAccounts;
    
    document.querySelector('#count var').innerHTML = exchanges.length;
    
    //const maxGasLimit = await snxjs.Synthetix.gasPriceLimit();
    //document.querySelector('#gas var').innerHTML = formatUnits(maxGasLimit, 'gwei') + ' Gwei';
    
    
    // now fetch and populate chart
    /*
    const chartTarget = document.querySelector('#chart');
    chartTarget.innerHTML = loadingGIF;
    
    // TODO - below should be moved into snxData
    
    const type = 'days';
    const unit = 7;
    const typeToLabelFormatMap = {
			months: ts => moment(ts).format('MMM YY'),
			weeks: ts => 'Week ' + moment(ts).format('ww, YY'),
			days: ts => moment(ts).format('DD MMM YY'),
		};
		const typeWithoutPlural = type.slice(0, type.length - 1);
		// get entries from beyond a certain point
		const timestampInSecs = moment()
			.startOf(typeWithoutPlural)
			.subtract(unit, type)
			.unix();

		// results are reverse chronologically ordered
		const results = await snxData.exchanges.since({ timestampInSecs });
		const groups = [];
		const _cache = {};
		const lastMomentInWindow = moment(results[0].timestamp).endOf(typeWithoutPlural);

		for (const { timestamp, fromAmountInUSD, feesInUSD, fromAddress } of results) {
			const i = Math.abs(moment(timestamp).diff(lastMomentInWindow, type));
			// initialize the grouping
			groups[i] = groups[i] || {
				volume: 0,
				fees: 0,
				unique: 0,
				label: typeToLabelFormatMap[type](timestamp),
			};
			_cache[i] = _cache[i] || {};

			groups[i].volume = Math.round(fromAmountInUSD + groups[i].volume);
			groups[i].fees = Math.round(feesInUSD + groups[i].fees);
			groups[i].unique += !_cache[i][fromAddress] ? 1 : 0;

			_cache[i][fromAddress] = true; // track this address
		}
    
    new frappe.Chart(chartTarget, {  
      title: 'Last 7 Days Exchange Volume (in millions USD)',
      data: {
        labels: groups.map(({ label }) => label),
        datasets: [
          {
            name: 'USD',
            values: groups.map(({ volume }) => volume/1e6)
          }
        ]
      },
      type: 'bar', 
      colors: ['#7cd6fd', '#743ee2']
    });
    */
  } catch (err) {
    console.error(err);
  }
};

document.querySelector('button[name=start-l1]').addEventListener('click', lookup);

document.querySelector('button[name=start-ovm]').addEventListener('click', () => lookup({ useOvm: true }));