{% extends "exchange/base.html" %}
{% block content %}
<div style="display: flex; flex-direction: column; align-items: center;"> <!--Main content wrapper-->
  <div style="flex: 1 1 650px; width: 80%; min-width: 550px; border: 1px solid #cccccc; border-radius: 15px; display: flex; flex-direction: column; padding: 2rem;"> <!-- Main content-->
    <div><!--Row one: Market summary > company name-->
      <span style="font-size: 2rem; color: #cccccc;">Market Summary > </span>
      <span style="font-size: 2rem;">{{ company.name }}</span>
    </div>
    <div><!--Row 2: Company symbol-->
      <span style="font-size: 1.5rem;">{{ company.symbol }}</span>
    </div>
    <div><!--Row 3: price-->
      <span style="font-size: 1.5rem;">Market price: {{ "$%.2f"|format(company.market_price) }}</span>
    </div>
    <div><!--Row 4: zoom level buttons-->
      <div style="display: flex; justify-content: space-around; border-bottom: 1px solid #cccccc;">
        <a class="waves-effect btn-flat black-text" style="flex-grow: 1; display: flex; justify-content: center;" id="set-zoom-day" zoom="day">day</a>
        <a class="waves-effect btn-flat black-text" style="flex-grow: 1; display: flex; justify-content: center;" id="set-zoom-month" zoom="month">month</a>
        <a class="waves-effect btn-flat black-text" style="flex-grow: 1; display: flex; justify-content: center;" id="set-zoom-year" zoom="year">year</a>
        <a class="waves-effect btn-flat black-text" style="flex-grow: 1; display: flex; justify-content: center;" id="set-zoom-max" zoom="max">max</a>
      </div>
    </div>
    <div style="flex: 1 0 280px; margin: 0rem 0rem;"><!--Row 5: GRAPH-->
      <canvas id="stock-chart-canvas" width="400" height="400"></canvas>
    </div>
    <div> <!--Row 6: Description-->
      <span style="font-size: 2rem;">Company description</span>
      <p>
        {{ company.name }} was founded on {{ company.create_date_display }} by {{ company.founder_name }} with an 
        an initial value of {{ "$%.2f"|format(company.initial_value) }} spread across {{ company.initial_size }} 
        shares
      </p>
    </div>
  </div>
</div>

<script>
  // The sizing of a canvas element is set directly on the element attribute instead of styling, so it needs to be set 
  // on JavaScript
  const stockChartCanvas = document.querySelector("#stock-chart-canvas");
  const stockChartContainer = stockChartCanvas.parentElement;
  stockChartCanvas.width = stockChartContainer.offsetWidth;
  stockChartCanvas.height = stockChartContainer.offsetHeight;
  const companySymbol = "{{ company.symbol }}";
  const fetchClient = new FetchHTTP("");

  let stockChart = new Chart(stockChartCanvas, {
    type: "candlestick",
    data: {},
    options: {}
  })

  function redrawChart(chart, companySymbol, zoom, debug = 0){
    // Request stock data from the /api/stock_chart_data, then reset the entire chart data 
    fetchClient.get(`/api/stock_chart_data?symbol=${companySymbol}&zoom=${zoom}&debug=${debug}`)
    .then(function(resp){
      chart.data = resp.data;
      chart.options = resp.options;
      chart.update();
    })
  }

  // Upon the loading of the page, draw with "day", and change "day" button to darken
  redrawChart(stockChart, companySymbol, "day")
  document.querySelector("#set-zoom-day").style.backgroundColor = "#cccccc";

  // Add event listener to "clicking" of each of the set-zoom-XXX button
  clickEvent = function(e){
    // Find all its siblings and set everyone's background color to be white, then set itself to be dark and 
    // redraw the chart
    buttonContainer = e.target.parentElement;
    buttonContainer.querySelectorAll("a").forEach(function(a){a.style.backgroundColor = "white";})
    e.target.style.backgroundColor = "#cccccc";
    redrawChart(stockChart, companySymbol, e.target.getAttribute("zoom"));
  }
  document.querySelector("#set-zoom-day").addEventListener("click", clickEvent)
  document.querySelector("#set-zoom-month").addEventListener("click", clickEvent)
  document.querySelector("#set-zoom-year").addEventListener("click", clickEvent)
  document.querySelector("#set-zoom-max").addEventListener("click", clickEvent)
  </script>
{% endblock content %}