<script setup>
import * as d3 from "d3";
import { onMounted } from "vue";

const props = defineProps({
  score: { type: Number, default: 30 },
});

const id = "csrScoreBar";


onMounted(() => {
  drawScale(id, d3.interpolateRdYlGn);
});

function drawScale(id, interpolator) {
  var data = Array.from(Array(100).keys());

  var cScale = d3.scaleSequential()
    .interpolator(interpolator)
    .domain([0, 99]);

  var xScale = d3.scaleLinear()
    .domain([0, 99])
    .range([0, 360]);

  d3.select("#" + id)
    .selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d) => Math.floor(xScale(d)))
    .attr("y", 0)
    .attr("height", 40)
    .attr("width", (d) => {
      if (d == 99) {
        return 6;
      }
      return Math.floor(xScale(d + 1)) - Math.floor(xScale(d)) + 1;
    })
    .attr("fill", (d) => {
      if (d >= props.score && d < props.score+1) {
        console.log("d = " + d)
        return "black"
      }
      return cScale(d);
    });
}
</script>
<template>
  <div class="crsContainer">
    <div></div>
    <font-awesome-icon id="auth" :icon="['fas', 'user-shield']" size="2xl" style="color: #45b408" />
    Call Risk Score is {{score}}
    <div class="img-overlay-wrap">
      <svg :id="id" width="360" height="40"></svg>
    </div>
  </div>


</template>
<style>
.crsContainer {
  margin: 8px;
  border-radius: 5px;
  padding: 11px 16px 11px 12px;
  align-items: flex-start;
  gap: 8px;
  border-radius: 5px;
  font-family: OpenSans, Ariel, sans-serif;
  font-size: 11px;
  border: 2px solid #45b408;
}

.img-overlay-wrap svg { /* <= optional, for responsiveness */
   display: block;
   max-width: 100%;
   height: auto;
   margin: 8px;
}

</style>
