<template>
  <datepicker
    :name="name"
    :value="value"
    :disabled="disabled"
    @input="dateFormatter"
    :bootstrap-styling="true"
    :placeholder="placeholder"
    :initial-view="initialView"
    :clear-button="clearButton"
    :format="displayDateFormat"
    :wrapper-class="wrapperClass"
    :calendar-class="calendarClass"
    :disabled-dates="disableDateRange"
    :input-class="{ 'bg-white': !disabled, 'border-danger': hasError }"
    ref="datePicker"
  >
  </datepicker>
</template>

<script>
import Datepicker from 'vuejs-datepicker'
import moment from 'moment'
export default {
  name: 'CustomDatePicker',
  components: { Datepicker },
  props: {
    name: { type: String, default: 'dateField' },
    value: { type: String, required: false },
    hasError: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    clearButton: { type: Boolean, default: true },
    initialView: { type: String, default: 'day' },
    placeholder: { type: String, default: 'dd/mm/yyyy' },
    disableDateRange: { type: Object, default: () => ({}) },
    displayDateFormat: { type: String, default: 'd MMMM yyyy' },
    wrapperClass: { type: [String, Array], default: () => [] },
    calendarClass: { type: [String, Array], default: () => [] },
  },
  data() {
    return {
      formattedDate: String,
    }
  },
  methods: {
    dateFormatter(date) {
      date !== null ? (this.formattedDate = moment(date).format('YYYY-MM-DD')) : (this.formattedDate = null)
    },
  },
  watch: {
    formattedDate() {
      this.$emit('input', this.formattedDate)
    },
  },
}
</script>
