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

export default defineComponent({
  props: {
    filter: {
      type: Object as PropType<PeriodCalendarFilter>,
      required: true,
    },
  },
  setup(props) {
    const setValue = (val: Moment | undefined, isEndVal?: boolean) => {
      const startDate: Moment | undefined = !isEndVal ? val : props.filter.startDate
      const endDate: Moment | undefined = isEndVal ? val : props.filter.endDate

      props.filter.addValue({ startDate, endDate })
    }

    return () => (
      <div class="ark-ui-filterbar-period-calendar-filter">
        <PeriodCalendar
          label={props.filter.label}
          placeholder=''
          start={props.filter.startDate}
          end={props.filter.endDate}
          onSetStart={(v) => setValue(v)}
          onSetEnd={(v) => setValue(v, true)}
        />
      </div>

    )
  },
})
</script>

<style lang="scss" scoped>
.ark-ui-filterbar-period-calendar-filter {
  &:deep {
    .ark-ui-period-calendar-input-body {
      right: 0;
      margin-top: 2px;
    }
  }
}
</style>
