// set up DuckDB for querying 
db = DuckDBClient.of({ 
    songs: filtered_songs_album,
})

//use SQL to apply filters and return a new array
filtered_songs = db.sql`SELECT 
  track_name
  ,album_name
  ,round(liveness,2) as liveness
  ,round(valence,2) as valence
  ,round(energy,2) as energy
  ,round(acousticness,2) as acousticness
  ,danceability
  ,speechiness
  ,instrumentalness
FROM songs
WHERE 
valence >= ${sliders.valence}
and album_name <> 'NA'
and energy >= ${sliders.energy}
and danceability>= ${sliders.danceability}
and acousticness >= ${sliders.acousticness}`

function heatmap(value, minValue, maxValue) {
  // Calculate the color scale based on the value's position
  var scale = (value - minValue) / (maxValue - minValue);
  var color = getColorFromScale(scale);

  var fontColor = value > 0.3 ? "white" : "black";

  // Create the output div with the scaled background color
  return htl.html`
    <div style="background-color: ${color}; color: ${fontColor}; text-align: center;">
      ${value}
    </div>
  `;
}


function getColorFromScale(scale) {

  var colors = d3.schemeBuPu[7]

  // Calculate the index of the color in the color ramp based on the scale
  var index = Math.floor(scale * (colors.length - 1));

  // Get the start and end colors from the color ramp
  var startColor = hexToRgb(colors[index]);
  var endColor = hexToRgb(colors[index + 1]);

  // Helper function to convert hex color to RGB
function hexToRgb(hex) {
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function (m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? [
    parseInt(result[1], 16),
    parseInt(result[2], 16),
    parseInt(result[3], 16)
  ] : [255, 255, 255]; // Default to white if invalid hex color
}

  // Calculate the intermediate color based on the scale
  var color = startColor.map(function (channel, i) {
    var range = endColor[i] - channel;
    return Math.round(channel + range * (scale * (colors.length - 1) - index));
  });

  // Return the color in RGB format
  return "rgb(" + color.join(",") + ")";
}

// Template credit: This layout is updated from Martien van Steenbergen @martien/horizontal-inputs

template = (inputs) => 
htl.html`<div class="styled">${Object.values(inputs)}</div>
<style>
  div.styled {
    text-align: left;
    column-count: 2
  }
  div.styled label {
    font-weight: bold;
    line-height: 200%;
  }
  div.styled label:not(div>label):after {
    content: ":";
  }
</style>`