<template>
  <Datepicker
    v-model="date"
    :placeholder="placeholder"
    :format="format"
    :timePicker="false"
    :minDate="configuration?.minDate"
    :allowedDates="configuration?.allowedDates"
    :disabledDates="configuration?.allowedDates"
    :enableTimePicker="false"
    :selectText="configuration?.selectText ?? 'Selecteer'"
    :cancelText="configuration?.selectText ?? 'Annuleer'"
    :autoApply="configuration?.autoApply ?? true"
  />
</template>

<script>
import Datepicker from "@vuepic/vue-datepicker";

export default {
  name: "InputDatePicker",
  props: {
    type: { type: String, required: false, default: "date" },
    format: { type: String, required: false, default: "dd/MM/yy" },
    value: { type: Object, required: false, default: null },
    placeholder: { type: String, required: false, default: null },
    configuration: { type: Object, required: false, default: null },
  },
  data() {
    return {
      date: null,
    };
  },
  components: {
    Datepicker,
  },
  watch: {
    value(value) {
      this.date = value;
    },
  },
};
</script>
