const {ipcRenderer} = require("electron");

class Markets {
  constructor() {}

  renderMarkets() {
    EthoMainGUI.renderTemplate("markets.html", {});
    $(document).trigger("render_markets");

    $.getJSON("https://api.coingecko.com/api/v3/coins/ether-1?sparkline=true", function (data) {
      $("#ETHOToUSD").html(data.market_data.current_price.usd.toFixed(5) + " $");
      $("#ETHOToBTC").html(data.market_data.current_price.btc.toFixed(8)) + " sats";
      $("#marketcap").html(data.market_data.market_cap.usd.toFixed(0) + " $ (" + data.market_cap_rank + ")");
      $("#dailyVolume").html(data.market_data.total_volume.usd.toFixed(0) + " $");

      $("#changeUSD").html("7 days change: " + data.market_data.price_change_percentage_7d_in_currency.usd.toFixed(2) + "%");
      $("#changeBTC").html("7 days change: " + data.market_data.price_change_percentage_7d_in_currency.btc.toFixed(2) + "%");
      $("#changeMarketcap").html("high 24h: " + data.market_data.high_24h.usd.toFixed(5) + " $");
      $("#changeVolume").html("all time high: " + data.market_data.ath.usd.toFixed(5) + " $");

      new Chart(document.getElementById("chartMarketPriceCanvas"), {
        type: "line",
        data: {
          labels: data.market_data.sparkline_7d.price,
          datasets: [
            {
              data: data.market_data.sparkline_7d.price,
              backgroundColor: "rgb(122,19,54,0.1)",
              fill: true,
              borderWidth: 3,
              pointRadius: 0,
              borderColor: "#7A1336"
            }
          ]
        },
        options: {
          animation: false,
          responsive: true,
          maintainAspectRatio: false,
          legend: {
            display: false,
            labels: {
              display: false
            }
          },
          scales: {
            yAxes: [
              {
                ticks: {
                  maxTicksLimit: 5,
                  beginAtZero: true,
                  fontSize: 10,
                  callback: function (value, index, values) {
                    return value.toFixed(2) + " $";
                  }
                },
                gridLines: {
                  color: "rgba(255,255,255,.08)"
                }
              }
            ],
            xAxes: [
              {
                display: false
              }
            ]
          }
        }
      });
    });
  }
}

// create new markets variable
EthoMarkets = new Markets();