<template>
  <div class="ewallet-datetimepicker pl-3">
    <date-picker
      v-model="from"
      :lang="getSelectedLanguageCode"
      :placeholder="$t('Common.FromDate')"
      confirm-text="OK"
      :not-after="new Date()"
      @change="confirmFromDate"
    />
    <date-picker
      v-model="to"
      :lang="getSelectedLanguageCode"
      :placeholder="$t('Common.ToDate')"
      :not-before="from"
      @change="confirmToDate"
    />
  </div>
</template>
<script>
import DatePicker from 'vue2-datepicker'
import { mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'EwalletDatetimepicker',
  components: {
    DatePicker,
  },
  data() {
    return {
      from: null,
      to: null,
    }
  },
  mounted() {},
  methods: {
    ...mapActions(['fetchTransactionHistory']),
    ...mapMutations(['SET_EWALLET_HISTORY_DATERANGE', 'SET_EWALLET_RECORD_DATERANGE']),
    confirmFromDate(val) {
      if (this.getEwalletTabIndex === 0) {
        // Transaction history
        if ((val === null || val === '') && (this.to === null || this.to === '')) {
          this.SET_EWALLET_HISTORY_DATERANGE({ from: null, to: null })
        } else if (this.to === null || this.to === '') {
          this.SET_EWALLET_HISTORY_DATERANGE({ from: this.convertDate(val), to: this.convertDate(new Date()) })
        } else {
          this.SET_EWALLET_HISTORY_DATERANGE({ from: this.convertDate(val), to: this.convertDate(this.to) })
        }
        this.fetchTransactionHistory({
          from_date: this.getEwalletHistoryDate.from,
          to_date: this.getEwalletHistoryDate.to,
          offset: this.getCurrentHistoryOffset,
        })
      } else {
        // Record
        if ((val === null || val === '') && (this.to === null || this.to === '')) {
          this.SET_EWALLET_RECORD_DATERANGE({ from: null, to: null })
        } else if (this.to === null || this.to === '') {
          this.SET_EWALLET_RECORD_DATERANGE({ from: this.convertDate(val), to: this.convertDate(new Date()) })
        } else {
          this.SET_EWALLET_RECORD_DATERANGE({ from: this.convertDate(val), to: this.convertDate(this.to) })
        }
        this.fetchTransactionHistory({
          from_date: this.getEwalletRecordDate.from,
          to_date: this.getEwalletRecordDate.to,
          offset: this.getCurrentRecordOffset,
        })
      }
    },
    confirmToDate(val) {
      if (this.getEwalletTabIndex === 0) {
        // Transaction history
        if ((this.from === null || this.from === '') && (val === null || val === '')) {
          this.SET_EWALLET_HISTORY_DATERANGE({ from: null, to: null })
        } else if (val === null || val === '') {
          this.SET_EWALLET_HISTORY_DATERANGE({ from: this.convertDate(this.from), to: this.convertDate(new Date()) })
        } else if (this.from === null || this.from === '') {
          this.from = val
          this.SET_EWALLET_HISTORY_DATERANGE({ from: this.convertDate(val), to: this.convertDate(val) })
        } else {
          this.SET_EWALLET_HISTORY_DATERANGE({ from: this.convertDate(this.from), to: this.convertDate(val) })
        }
        this.fetchTransactionHistory({
          from_date: this.getEwalletHistoryDate.from,
          to_date: this.getEwalletHistoryDate.to,
          offset: this.getCurrentHistoryOffset,
        })
      } else {
        // Record
        if ((this.from === null || this.from === '') && (val === null || val === '')) {
          this.SET_EWALLET_RECORD_DATERANGE({ from: null, to: null })
        } else if (val === null || val === '') {
          this.SET_EWALLET_RECORD_DATERANGE({ from: this.convertDate(this.from), to: this.convertDate(new Date()) })
        } else if (this.from === null || this.from === '') {
          this.from = val
          this.SET_EWALLET_RECORD_DATERANGE({ from: this.convertDate(val), to: this.convertDate(val) })
        } else {
          this.SET_EWALLET_RECORD_DATERANGE({ from: this.convertDate(this.from), to: this.convertDate(val) })
        }
        this.fetchTransactionHistory({
          from_date: this.getEwalletRecordDate.from,
          to_date: this.getEwalletRecordDate.to,
          offset: this.getCurrentRecordOffset,
        })
      }
    },
    convertDate(date, firstDate = false) {
      let temp = new Date(date)
      return (
        temp.getFullYear() +
        '-' +
        (temp.getMonth() + 1).toString().padStart(2, '0') +
        '-' +
        (firstDate
          ? '01'
          : temp
              .getDate()
              .toString()
              .padStart(2, '0'))
      )
    },
  },
  computed: {
    ...mapGetters([
      'getEwalletTabIndex',
      'getEwalletHistoryDate',
      'getCurrentHistoryOffset',
      'getCurrentRecordOffset',
      'getEwalletRecordDate',
      'getSelectedLanguageCode',
    ]),
  },
}
</script>
