<template>
  <div class="card filters-container">
    <div class="title">Filters</div>
    <div style="grid-area:show">Show</div>
    <div style="grid-area:day-title">Day/night</div>
    <v-select
      style="grid-area:day-select"
      :options="dayNightSelect"
      label="name"
      v-model="isDay"
      :clearable="false"
    />
    <div style="grid-area:snow-found-title">Snow found</div>
    <v-select
      style="grid-area:snow-found-select"
      :options="snowFoundSelect"
      label="name"
      v-model="snowFound"
      :clearable="false"
    />
    <div style="grid-area:stick-found-title">Stake found</div>
    <v-select
      style="grid-area:stick-found-select"
      :options="stickFoundSelect"
      label="name"
      v-model="stickFound"
      :clearable="false"
    />
    <div style="grid-area:edited-title">Manually edited</div>
    <v-select
      style="grid-area:edited-select"
      :options="editedSelect"
      label="name"
      v-model="manuallyEdited"
      :clearable="false"
    />
    <div style="grid-area:discarded-title">Discarded</div>
    <v-select
      style="grid-area:discarded-select"
      :options="discardedSelect"
      label="name"
      v-model="imageDiscarded"
      :clearable="false"
    />
    <div style="grid-area:height-title">Snow height</div>
    <vue-slider
      :contained="true"
      :lazy="true"
      :tooltip="'always'"
      :tooltipPlacement="'bottom'"
      :max="maxStickLengthCm"
      :processStyle="{ 'background-color': '#89bdbd' }"
      :tooltipStyle="{ 'background-color': '#89bdbd' }"
      v-model="snowHeight"
      style="margin-bottom:20px"
    />
  </div>
</template>

<script>
import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css'

import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

export default {
  name: 'Filters',
  components: {
    vSelect,
    VueSlider
  },
  data() {
    return {
      dayNightSelect: [
        {
          name: 'Night',
          value: 0
        },
        {
          name: 'Day',
          value: 1
        },
        {
          name: 'All',
          value: 2
        }
      ],
      snowFoundSelect: [
        {
          name: 'No',
          value: 0
        },
        {
          name: 'Yes',
          value: 1
        },
        {
          name: 'All',
          value: 2
        }
      ],
      stickFoundSelect: [
        {
          name: 'No',
          value: 0
        },
        {
          name: 'Yes',
          value: 1
        },
        {
          name: 'All',
          value: 2
        }
      ],
      editedSelect: [
        {
          name: 'No',
          value: 0
        },
        {
          name: 'Yes',
          value: 1
        },
        {
          name: 'All',
          value: 2
        }
      ],
      discardedSelect: [
        {
          name: 'No',
          value: 0
        },
        {
          name: 'Yes',
          value: 1
        },
        {
          name: 'All',
          value: 2
        }
      ]
    }
  },
  computed: {
    isDay: {
      get() {
        const filterValue = this.$store.state.filters.isDay
        return this.dayNightSelect.filter(d => d.value === filterValue)
      },
      set(selected) {
        this.$store.dispatch('setFilter', {
          filterKind: 'isDay',
          value: selected.value
        })
      }
    },
    snowFound: {
      get() {
        const filterValue = this.$store.state.filters.snowDetected
        return this.snowFoundSelect.filter(d => d.value === filterValue)
      },
      set(selected) {
        this.$store.dispatch('setFilter', {
          filterKind: 'snowDetected',
          value: selected.value
        })
      }
    },
    stickFound: {
      get() {
        const filterValue = this.$store.state.filters.stickFound
        return this.stickFoundSelect.filter(d => d.value === filterValue)
      },
      set(selected) {
        this.$store.dispatch('setFilter', {
          filterKind: 'stickFound',
          value: selected.value
        })
      }
    },
    snowHeight: {
      get() {
        return [
          this.$store.state.filters.minSnowHeight,
          this.$store.state.filters.maxSnowHeight
        ]
      },
      set(values) {
        this.$store.dispatch('setFilter', {
          filterKind: 'minSnowHeight',
          value: values[0]
        })
        this.$store.dispatch('setFilter', {
          filterKind: 'maxSnowHeight',
          value: values[1]
        })
      }
    },
    manuallyEdited: {
      get() {
        const filterValue = this.$store.state.filters.imageSticksEdited
        return this.editedSelect.filter(d => d.value === filterValue)
      },
      set(selected) {
        this.$store.dispatch('setFilter', {
          filterKind: 'imageSticksEdited',
          value: selected.value
        })
        this.$store.dispatch('setFilter', {
          filterKind: 'imageApproved',
          value: selected.value
        })
      }
    },
    imageDiscarded: {
      get() {
        const filterValue = this.$store.state.filters.imageDiscarded
        return this.discardedSelect.filter(d => d.value === filterValue)
      },
      set(selected) {
        this.$store.dispatch('setFilter', {
          filterKind: 'imageDiscarded',
          value: selected.value
        })
      }
    },
    maxStickLengthCm() {
      return this.$store.getters.maxStickLengthCm
    }
  }
}
</script>

<style lang="scss" scoped>
.filters-container {
  display: grid;
  grid-template-rows: auto auto auto auto auto auto;
  grid-template-columns: 150px 200px;
  grid-gap: 5px;
  align-items: center;
  grid-template-areas:
    'title show'
    'day-title day-select'
    'snow-found-title snow-found-select'
    'stick-found-title stick-found-select'
    'edited-title edited-select'
    'discarded-title discarded-select'
    'height-title height-select';

  padding: 10px;
}

.title {
  grid-area: title;
  font-weight: bold;
}
</style>
