<template>
  <div class="date-range-container">
    <div class="date-selectors">
      <div>
        <label>From</label>
        <v-date-picker
          :key="value[0] ? value[0].value : 'startDate'"
          is-required
          v-bind="{
            popover: {
              visibility: 'hidden',
            },
            updateOnInput: false,
            value: value[0],
          }"
          @input="selectDate($event, true)"
        >
          <template #default="{ inputValue, inputEvents }">
            <input
              :value="inputValue"
              data-test="select filter start date"
              placeholder="mm/dd/yy"
              v-on="inputEvents"
              @input="move($event)"
            >
          </template>
        </v-date-picker>
      </div>
      <div>
        <label>To</label>
        <v-date-picker
          :key="value[1] ? value[1].value : 'endDate'"
          is-required
          v-bind="{
            popover: {
              visibility: 'hidden',
            },
            updateOnInput: false,
            value: value[1],
          }"
          @input="selectDate"
        >
          <template #default="{ inputValue, inputEvents }">
            <input
              :value="inputValue"
              data-test="select filter end date"
              placeholder="mm/dd/yy"
              v-on="inputEvents"
              @input="move($event)"
            >
          </template>
        </v-date-picker>
      </div>
    </div>
    <v-date-picker
      ref="calendar"
      is-range
      trim-weeks
      v-bind="{
        value: {
          start: value[0],
          end: value[1],
        },
      }"
      @input="$emit('input', $event ? [$event.start, $event.end] : [])"
    />
  </div>
</template>

<script>
  /**
   * A filter component using the [v-calendar]{@link https://vcalendar.io/} plugin to display a "from" and "to" typeable text input above by a [date-range calendar]{@link https://vcalendar.io/examples/datepickers.html#date-range}. The value is required be an empty array or [start, end].
   *
   * @vuedoc
   * @exports TfFilterDateRangeInput
   * @category Components
   */

  export default {
    name: 'TfFilterDateRangeInput',
    props: {
      value: {
        type: Array,
        required: true,
        validator: (value) => !value.length || value.length === 2,
      },
    },
    methods: {
      /**
       * Move the calendar to the date parameter and emit the a new value to the parent.
       *
       * @param {string} date
       * @param {boolean} isStart
       */
      selectDate(date, isStart = false) {
        this.$refs.calendar.move(date);
        this.$emit('input', isStart ? [date, this.value[1]] : [this.value[0], date]);
      },
      /**
       * Update calendar when user types.
       *
       * @param {string} event
       */
      move(event) {
        if (event.target.value) {
          this.$refs.calendar.move(event.target.value);
        }
      },
    },
  };
</script>

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

  input {
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 2px;
    border: solid 1px $tf-light-gray;
    height: 30px;
    line-height: 30px;
  }

  .date-range-container {
    padding: 20px;
  }

  .date-selectors {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;

    label {
      display: block;
      font-weight: 700;
    }

    ::v-deep input {
      width: 100px;
    }
  }
</style>
