<template>
  <b-form class="data-settings-wrap">
    <div class="range-wrap" v-if="selectedDateType === 'dateRange'">
      <b-form-group label-cols="4" label="Date Range">
        <vc-date-picker v-model="range.start" mode="dateTime">
          <template v-slot="{ inputValue, inputEvents }">
            <input
              placeholder="from"
              :value="inputValue"
              v-on="inputEvents"
            />
          </template>
        </vc-date-picker>
        <vc-date-picker v-model="range.end" mode="dateTime">
          <template v-slot="{ inputValue, inputEvents }">
            <input
              placeholder="to"
              :value="inputValue"
              v-on="inputEvents"
            />
          </template>
        </vc-date-picker>
        <span class="link" @click="setDateType('last')">
          Till Now
        </span>
      </b-form-group>
    </div>
    <b-form-group v-if="selectedDateType === 'last'" label-cols="4" label="Last">
      <multiselect v-model="selectedGrouping" @select="onSelectGrouping" :options="groupingData" :select-label="''" :selected-label="''" :deselect-label="''" label="name" track-by="key" :allow-empty="false"></multiselect>
      <span class="link" @click="setDateType('dateRange')">
          Date Range
        </span>
    </b-form-group>
    <b-form-group label-cols="4" label="Data aggregation function">
      <multiselect v-model="selectedAggFunction" :options="aggregationFunctions" :select-label="''" :selected-label="''" :deselect-label="''" :allow-empty="false"></multiselect>
    </b-form-group>
    <b-form-group label-cols="4" label="Grouping interval" v-if="selectedGrouping.groupingIntervals && selectedAggFunction !== 'no'">
      <multiselect v-model="selectedInterval" :options="selectedGrouping.groupingIntervals" :select-label="''" :selected-label="''" :deselect-label="''" label="name" track-by="key" :allow-empty="false" ></multiselect>
    </b-form-group>
  </b-form>
</template>

<script>
import groupingData from '../../../modals/dashboardSettings/groupingData.js'

export default {
  data () {
    return {
      aggregationFunctions: ['no', 'min', 'max', 'average', 'sum', 'count'],
      selectedAggFunction: '',
      groupingData: [],
      selectedGrouping: {},
      selectedInterval: {},
      range: {
        start: new Date(),
        end: new Date()
      },
      selectedDateType: 'last'
    }
  },
  methods: {
    initData () {
      this.groupingData = groupingData
      this.selectedGrouping = this.groupingData[18]
      this.selectedInterval = this.selectedGrouping.groupingIntervals[0]

      this.selectedAggFunction = this.aggregationFunctions[2]
    },
    onSelectGrouping (grouping) {
      this.selectedInterval = grouping.groupingIntervals[0]
    },
    setDateType (type) {
      this.selectedDateType = type
    },
    setCustomGroupingInterval () {
      let endDate = this.$moment(this.range.end)
      let startDate = this.$moment(this.range.start)

      let diffDays = endDate.diff(startDate, 'days')
      let diffMonths = endDate.diff(startDate, 'months')
      let diffYears = endDate.diff(startDate, 'years')

      if (diffYears >= 1) {
        this.selectedGrouping = this.historicalGroupingData[21]
        this.selectedInterval = this.selectedGrouping.groupingIntervals[0]
      } else if (diffMonths >= 6) {
        this.selectedGrouping = this.historicalGroupingData[20]
        this.selectedInterval = this.selectedGrouping.groupingIntervals[0]
      } else if (diffMonths >= 3) {
        this.selectedGrouping = this.historicalGroupingData[19]
        this.selectedInterval = this.selectedGrouping.groupingIntervals[0]
      } else if (diffDays >= 30) {
        this.selectedGrouping = this.historicalGroupingData[18]
        this.selectedInterval = this.selectedGrouping.groupingIntervals[0]
      } else if (diffDays >= 7) {
        this.selectedGrouping = this.historicalGroupingData[17]
        this.selectedInterval = this.selectedGrouping.groupingIntervals[0]
      } else if (diffDays >= 1) {
        this.selectedGrouping = this.historicalGroupingData[16]
        this.selectedInterval = this.selectedGrouping.groupingIntervals[0]
      }
    },
    getDataSettings () {
      let todayDate = this.$moment()
      let endDate = null
      let startDate = null

      if (this.selectedDateType === 'dateRange') {
        endDate = this.$moment(this.range.end).format('x')
        startDate = this.$moment(this.range.start).format('x')
      } else {
        endDate = todayDate.format('x')
        startDate = todayDate.subtract(this.selectedGrouping.value, this.selectedGrouping.type).format('x')
      }

      return {
        aggregate_func: this.selectedAggFunction,
        from_date: startDate,
        to_date: endDate,
        group_interval: this.selectedInterval.value,
        group_interval_type: (this.selectedInterval.type).slice(0, -1),
        type: this.selectedTab,
        last: (this.selectedDateType === 'dateRange') ? 'custom' : this.selectedGrouping.key
      }
    }
  },
  mounted () {
    this.initData()
  }
}
</script>

<style lang="scss" scoped>
  .data-settings-wrap {
    .link {
      text-decoration: underline;
      color: #0D85DA;
      width: 75px;
      display: inline-block;
      cursor: pointer;
    }
  }
</style>

<style lang="scss">
  .range-wrap {
    input {
      width: 49%;
      height: 40px;
    }
  }
</style>
