<template>
  <v-row>
    <v-col>
      <v-row class="d-flex justify-space-evenly">
        <v-select
          :items="envs"
          label="Environments"
          v-model="envSelector"
        ></v-select>
        <v-select
          :items="metrics"
          label="Metric"
          v-model="metricSelector"
        ></v-select>
      </v-row>
      <v-slider
        class="control-slider"
        label="maximum steps"
        v-model="maxStepComp"
        :step="1"
        :min="10"
        :max="200"
        thumb-label
      />
      <v-slider
        class="control-slider"
        label="nr base funcs"
        v-model="baseFuncsComp"
        :step="1"
        :min="2"
        :max="20"
        thumb-label
      />
      <v-slider
        class="control-slider"
        label="nr episodes"
        v-model="cstore.nr_episodes"
        :step="1"
        :min="10"
        :max="200"
        thumb-label
        :disabled="episodeRef"
      />
      <v-slider
        class="control-slider"
        label="nr runs"
        v-model="cstore.nr_runs"
        :step="1"
        :min="1"
        :max="50"
        thumb-label
        :disabled="runRef"
      />
      <v-select
        :items="acq_funs"
        label="Acquisition Function"
        v-model="acqSelector"
        :disabled="acqRef"
      ></v-select>
      <v-slider
        class="control-slider"
        label="Metric Parameter"
        v-model="cstore.metric_parameter"
        :step="0.01"
        :min="0"
        :max="1"
        thumb-label
        :disabled="epsilonRef"
      />
      <v-row class="d-flex justify-space-evenly mb-9">
        <v-btn color="primary" @click="cstore.setSendWeights()"
          >Send Weights</v-btn
        >
        <v-btn color="secondary" @click="cstore.setRunner()">Run</v-btn>
      </v-row>
    </v-col>
  </v-row>
</template>

<script setup>
import { usePStore } from "@/store/PolicyStore";
import { useCStore } from "@/store/ControlStore";
import { computed, watch, ref } from "vue";

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

const envs = cstore.envs;
const metrics = cstore.metircs;
const acq_funs = cstore.acq_funs;

const episodeRef = ref(true);
const runRef = ref(true);
const acqRef = ref(true);
const epsilonRef = ref(true);

const maxStepComp = computed({
  get: () => pstore.max_steps,
  set: (value) => pstore.setMaxSteps(value),
});

const baseFuncsComp = computed({
  get: () => pstore.nr_weights,
  set: (value) => pstore.setNrWeights(value),
});

const envSelector = computed({
  get: () => cstore.env,
  set: (value) => cstore.setEnv(value),
});

const metricSelector = computed({
  get: () => cstore.metric,
  set: (value) => cstore.setMetric(value),
});

const acqSelector = computed({
  get: () => cstore.acq_fun,
  set: (value) => cstore.setAcq(value),
});

watch(
  () => cstore.getMetric,
  () => {
    const usrMode = cstore.getMetric;

    if (usrMode === "manually") {
      episodeRef.value = true;
      runRef.value = true;
      acqRef.value = true;
      epsilonRef.value = true;
    }
    if (usrMode === "BO") {
      episodeRef.value = false;
      runRef.value = false;
      acqRef.value = false;
      epsilonRef.value = true;
    }
    if (usrMode === "active BO") {
      episodeRef.value = false;
      runRef.value = false;
      acqRef.value = false;
      epsilonRef.value = false;
    }
  }
);
</script>

<style scoped>
.control-slider {
}
</style>
