token = localStorage.getItem('ath_token')

d3 = require('d3')

results = {
  yield undefined
  
  yield await fetch("https://api.andrewheiss.com/weight?start_date=2024-01-01&loess=true&forecast=true&forecast_start=2024-08-01", {
    body: "",
    headers: {
      "Authorization": `Bearer ${token}`,
      "content-type": "application/json"
    },
    method: "POST",
    mode: "cors"
  }).then(response => {
    if (!response.ok) {
        if(response.status === 401) {
            throw new Error('Unauthorized');
        } else {
            throw new Error('Network error');
        }
    }
    return response.json();
  })
  .then(data => ({
    ...data,
    wt: data.wt.map(d => ({
      ...d,
      timestamp: new Date(d.timestamp),
      timestamp_local_as_utc: new Date(d.timestamp_local_as_utc),
    })),
    trend: data.trend.map(d => ({
      ...d,
      timestamp_local_as_utc: new Date(d.timestamp_local_as_utc),
    })),
    forecast: data.forecast.map(d => ({
      ...d,
      timestamp_local_as_utc: new Date(d.timestamp_local_as_utc),
    }))
  }))
  .catch(error => {
      if (error.message === 'Network error') {
        console.error('Error with the API call:', error);
        return error.message;
      } else if (error.message === 'Unauthorized') {
        console.error('Unauthorized:', error);
        return error.message;
      } else {
        console.error('Some general error:', error);
        return "Error";
      }
    });
}

{
  const zoom = d3.zoom().on("zoom", handleZoom);

  function handleZoom(e) {
    const scale = plot.scale("x");
    const x = d3.scaleLinear().domain(scale.domain).range(scale.range);
    const startDate = new Date(
      Math.max(e.transform.rescaleX(x).domain()[0], extent[0].getTime())
    );

    const endDate = new Date(
      Math.min(e.transform.rescaleX(x).domain()[1], extent[1])
    );

    mutable domain = [startDate, endDate];
  }

  function initZoom() {
    d3.select(plot).call(zoom);
  }
  
  initZoom();
}

extent = {
  if (results == undefined) {
    return undefined;
  } else if (show_forecast) {
    let min = d3.min(results.wt, ({ timestamp_local_as_utc }) => timestamp_local_as_utc);
    let max = d3.max(results.forecast, ({ timestamp_local_as_utc }) => timestamp_local_as_utc);
    return [min, max];
  } else {
    return d3.extent(results.wt, ({ timestamp_local_as_utc }) => timestamp_local_as_utc)
  }
}
  
mutable domain = extent;

{
  let plotContainer = document.querySelector('.weight-plot');

  let container = document.getElementById('quarto-content');
  let loadingContainer = document.getElementById('loading-alert');

  // If the loading container doesn't exist, create it
  if (!loadingContainer) {
    container.insertAdjacentHTML('afterbegin', `
      <div id="loading-alert" class="container mt-3">
      </div>
    `);
    loadingContainer = document.getElementById('loading-alert');
  }

  if (results === undefined) {
    loadingContainer.innerHTML = `
      <div class="alert alert-info" role="alert">
          <i class="fa-solid fa-clock fa-spin"></i>&ensp;Loading data…
      </div>
    `;
    
    plotContainer.style.display = "";
  } else if (!token) {
    loadingContainer.innerHTML = `
      <div class="alert alert-warning" role="alert">
          <i class="fa-solid fa-lock"></i>&ensp;Not logged in!
      </div>
    `;
    
    plotContainer.style.display = "none";
  } else {
    loadingContainer.remove();
    plotContainer.style.display = "";
  }
}

{
  if (!token) {
  // Hide the .observablehq--error div
    let errorDiv = document.querySelector('.weight-plot .observablehq--error');
    if (errorDiv) {
      errorDiv.style.display = 'none';
    }
  }
}