<template>
  <div class="flex no-wrap ui-gap-x-xs">
    <preview-days-picker-item
      @click="input(date)"
      v-for="date in previewDates"
      :key="date.getDay()"
      :current-date="currentDate"
      :target-date="date"
    />
  </div>
</template>

<script lang="ts">
import { Component, Emit, Vue } from 'vue-property-decorator'
import { date } from 'quasar'
import PreviewDaysPickerItem from '@/widgets/tasks/components/form/date-picker/PreviewDaysPickerItem.vue'

@Component({
  components: { PreviewDaysPickerItem },
  inheritAttrs: false,
})
export default class PreviewDaysPicker extends Vue {
  get currentDate() {
    const date = new Date()
    date.setHours(0)
    date.setMinutes(0)

    return date
  }

  get previewDates(): Date[] {
    return Array.from({ length: 4 }).map((value, index) => {
      return date.addToDate(this.currentDate, { days: index, hours: 0 })
    })
  }

  @Emit()
  input(date: Date) {
    return date
  }
}
</script>
