<script>
import { computed } from 'vue';
import { Date, add, timedelta } from '@silane/datetime';
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';


export default {
  name: 'InputDateRange',
  components: { VueDatePicker },
  props: {
    modelValue: {
      type: /** @type {import('vue').PropType<[Date, Date]>} */(Array),
      required: true,
    },
    minDate: {
      type: /** @type {import('vue').PropType<Date | null>} */(Object),
      default: Date.min,
    },
    maxDate: {
      type: /** @type {import('vue').PropType<Date | null>} */(Object),
      default: Date.max,
    },
    inline: { type: Boolean, default: false },
    highlightedDates: {
      type: /** @type {import('vue').PropType<Date[]>} */(Array),
      default: () => [],
    },
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const internalValue = computed({
      get: () => [
        props.modelValue[0].toStdDate(),
        add(props.modelValue[1], timedelta({ days: -1 })).toStdDate(),
      ],
      set: val => {
        emit('update:modelValue', [
          Date.fromStdDate(val[0]),
          add(Date.fromStdDate(val[1]), timedelta({ days: 1 })),
        ]);
      },
    });

    return { Date, add, timedelta, internalValue };
  },
}
</script>

<template>
  <vue-date-picker
    v-model="internalValue"
    :min-date="minDate?.toStdDate()"
    :max-date="maxDate ? add(
      maxDate, timedelta({ days: -1 })
    ).toStdDate() : undefined"
    :inline="inline" :markers="highlightedDates.map(x => ({ date: x.toStdDate() }))"
    :range="true" :auto-apply="true" :clearable="false"
    :partial-range="false" :enable-time-picker="false" locale="ja-JP"
    :format="dateRange => dateRange?.map(
      x => Date.fromStdDate(x).strftime('%Y/%m/%d')
    ).join('～') ?? ''"
  />
</template>
