<template>
  <v-row no-gutters justify="center" class="weight-tuner">
    <!-- eslint-disable-next-line -->
    <v-col v-for="(weight, idx) in weights">
      <div class="weight-container">
        <vue-slider
          :value="weight"
          @change="updateWeight(idx, $event)"
          direction="btt"
          :height="100"
          :min="-1"
          :max="1"
          :interval="0.01"
        />
      </div>
    </v-col>
  </v-row>
</template>

<script setup>
import { usePStore } from "@/store/PolicyStore";

import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/default.css";
import { computed } from "vue";

const store = usePStore();

const weights = computed(() => store.weights);

const updateWeight = (index, newValue) => {
  const newWeights = weights.value.slice();
  newWeights[index] = newValue;
  store.setWeights(newWeights);
  store.setTrigger();
};
</script>

<style scoped>
.weight-tuner {
  height: 140px;
}
.weight-container {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>