<script lang="tsx">
import { type Moment } from 'moment'
import { defineComponent, type PropType } from 'vue'
import Calendar from '../../calendars/inputs/calendar-input'
import { CalendarFilter } from '../Filters'

export default defineComponent({
  props: {
    filter: {
      type: Object as PropType<CalendarFilter>,
      required: true,
    },
  },
  setup(props) {
    const setValue = (val: Moment | null) => {
      props.filter.addValue(val)
    }

    return () => (
      <div class="ark-ui-filterbar-calendar-filter">
        <Calendar
          label={props.filter.label}
          modelValue={props.filter.date}
          onValueChange={setValue}
          isClearable={true}
        />
      </div>

    )
  },
})
</script>

<style lang="scss" scoped>
</style>
