<script lang="ts">
import { computed, type PropType } 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: 'InputMultiDates',
  components: { VueDatePicker },
  props: {
    modelValue: { type: Array as  PropType<Date[]>, required: true },
    minDate: { type: Object as PropType<Date | null>, default: Date.min },
    maxDate: { type: Object as PropType<Date | null>, default: Date.max },
    inline: { type: Boolean, default: false },
    highlightedDates: { type: Array as PropType<Date[]>, default: () => [] },
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const internalValue = computed({
      get: () => props.modelValue.map(x => x.toStdDate()),
      set: val => {
        emit('update:modelValue', val?.map(x => Date.fromStdDate(x)) ?? []);
      },
    });

    return { 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() }))"
    :multi-dates="true" :enable-time-picker="false" locale="ja-JP"
  />
</template>
