<template>
  <div v-if="filter.type == 'string'" class="row">
    <BsSelect
      :model-value="filterSelection[filter.name]"
      @update:model-value="(value) => filterChanged(value, filter.name)"
      :options="filter.values"
      :display-value="`${
        filterSelection[filter.name].length
      } selected elements`"
      class="nobold"
      multiple
      outlined
    >
      <template v-slot:option="{ itemProps, opt, selected, toggleOption }">
        <q-item v-bind="itemProps">
          <q-item-section>
            <q-item-label v-html="opt"></q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-checkbox
              :model-value="selected"
              @update:model-value="toggleOption(opt)"
            ></q-checkbox>
          </q-item-section>
        </q-item>
      </template>
    </BsSelect>
  </div>
  <div v-else-if="filter.type == 'date'" class="row">
    <BsRange
      v-model="filterSelection[filter.name]"
      :min="0"
      :max="100"
      :step="1"
      label-always
      switch-label-side
      :left-label-value="
        dateRangeMapping(
          filterSelection[filter.name] ? filterSelection[filter.name].min : 0,
          filter.values
        )
      "
      :right-label-value="
        dateRangeMapping(
          filterSelection[filter.name] ? filterSelection[filter.name].max : 100,
          filter.values
        )
      "
      class="col-8"
    ></BsRange>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: {},
      filterSelection: {},
    };
  },
  mounted() {
    console.log("couocu");
    console.log(this.filter);
  },
  methods: {
    filterChanged(value, filterName) {
      this.filterSelection[filterName] = value;
      API.getDashboard(this.filterSelection).then((response) => {
        this.dashboard = response;
      });
    },
    dateRangeMapping(value_percentage, filter_values) {
      let currentIndex = Math.round(
        (value_percentage * (filter_values.length - 1)) / 100
      );
      console.log(filter_values[currentIndex]);
      return filter_values[currentIndex];
    },
  },
};
</script>
