<template>
    <v-row no-gutters class="vertical-tuner">
      <!-- eslint-disable-next-line -->
      <v-col v-for="(_ , idx) in weights" :key="idx" class="tuner-item">
        <vue-slider
          class="slider"
          v-model="weights[idx]"
          @change="updateWeight(idx, $event)"
          direction="ltr"
          :width="100"
          :min="-1"
          :max="1"
          :interval="0.01"
        />
        <v-checkbox class="ma-0 checkbox" v-model="store.weights_fixed[idx]" />
      </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";
import { useCStore } from "@/store/ControlStore";

const store = usePStore();
const cstore = useCStore();

const weights = computed({
  get: () => store.weights,
  set: (value) => store.setWeights(value),
});

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

<style scoped>
.vertical-tuner {
  height: 100%;
  transform: rotate(90deg);
  //transform-origin: bottom left;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.tuner-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-90deg);
  transform-origin: center;
}

.slider {
  margin-right: 10px;
}

.checkbox {
  padding: 0;
}
</style>
