<template>
  <div class="flex justify-between mt-2">
    <Label>Date</Label>
    <ResetFilter :reset-handler="resetDateRange" />
  </div>
  <div class="flex-grow mt-2">
    <DateRangePicker class="flex-none" v-model="tracesStore.tracesFilters.date" />
  </div>
</template>

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

import { DateRangePicker } from '@/components/ui/date-range-picker'
import { Label } from '@/components/ui/label'
import { useTracesStore } from '@/stores/traces'
import { getDateRange } from '@/utils/traceFilter'

import ResetFilter from './ResetFilter.vue'

const tracesStore = useTracesStore()

function resetDateRange() {
  const [min, max] = getDateRange(tracesStore.datasetTraces)

  tracesStore.tracesFilters.date.start = new CalendarDate(
    min.getFullYear(),
    min.getMonth() + 1,
    min.getDate()
  )
  tracesStore.tracesFilters.date.end = new CalendarDate(
    max.getFullYear(),
    max.getMonth() + 1,
    max.getDate()
  )
}
</script>
