<template>
  <div>
    <header v-if="filter.type === 'month-and-date-range'">
      <div class="btn-group">
        <TfButton
          v-for="option in dateOptions"
          :key="option.value"
          :disabled="dateType === option.value"
          type="primary"
          class="btn-type-selector"
          size="text-small"
          @click="$emit('changeDateFilterType', option.value)"
          v-text="option.text"
        />
      </div>
      <TfButton
        type="secondary"
        icon="times"
        size="icon-no-fill"
        @click="$emit('closePopover', true)"
      />
    </header>
    <TfButton
      v-else-if="filter.type !== 'date-range-input'"
      :class="[
        'btn-close-popover',
        { 'btn-close-month': filter.type === 'month' }
      ]"
      type="secondary"
      icon="times"
      size="icon-no-fill"
      @click="$emit('closePopover', true)"
    />
    <template v-if="dateType === 'month'">
      <TfDatePicker
        v-model="localValue"
        v-bind="{
          inline: true,
          viewType: 'month',
          openDate
        }"
      />
      <TfButton
        class="btn-to-current"
        data-test="filter date to current"
        type="primary"
        size="text-small"
        @click="changeToCurrentMonth"
        v-text="'Back to Current Month'"
      />
    </template>
    <TfFilterDateRangeInput
      v-else-if="dateType === 'date-range-input'"
      v-model="localValue"
    />
    <TfFilterDateRange
      v-else-if="dateType === 'date-range'"
      v-model="localValue"
    />
  </div>
</template>
<script>
  import TfFilterDateRange from './DateRange';
  import TfFilterDateRangeInput from './DateRangeInput';

  export default {
    name: 'TfFilterDate',
    components: { TfFilterDateRange, TfFilterDateRangeInput },
    props: {
      dateType: {
        type: String,
        required: true,
      },
      filter: {
        type: Object,
        required: true,
      },
      value: {
        type: Array,
        required: true,
      },
    },
    data: () => ({
      dateOptions: [
        { text: 'Month', value: 'month' },
        { text: 'Choose Range', value: 'date-range' },
      ],
      openDate: new Date(),
    }),
    computed: {
      /**
       * get: The first value of the model array if the dateType is month,
       * otherwise get the first array in the model or an empty array.
       * set: $emit the value wrapped in an array.
       */
      localValue: {
        get() {
          return this.dateType === 'month'
            ? this.value[0]
            : this.value[0] || [];
        },
        set(value) {
          this.$emit('input', [value]);
        },
      },
    },
    methods: {
      /**
       * Sets the open Date to today's date and emits "input" with that same value.
       */
      changeToCurrentMonth() {
        this.openDate = new Date();
        this.$emit('input', [this.openDate]);
      },
    },
  };

</script>

<style lang="scss" scoped>
  @import 'src/assets/styles/variables';

  ::v-deep .vdp-datepicker__calendar {
    position: relative;
  }

  header {
    display: flex;
    height: 42px;
    padding: 0 20px;
    border-bottom: 1px solid $tf-medium-gray;

    .tf-button--icon-no-fill {
      margin-left: auto;
    }
  }

  .btn {
    &-close-popover {
      position: absolute;
      z-index: 101;
      top: 15px;
      right: 15px;

      &.btn-close-month {
        z-index: 10001; // .vdp-datepicker__calendar has a z-index:10000
        top: 10px;
        right: 10px;
      }
    }

    &-type-selector {
      font-weight: 700;
      text-transform: uppercase;

      &.is-disabled {
        font-weight: 600;
      }
    }

    &-to-current {
      margin: 15px 0 30px 18px;
    }
  }
</style>
