var DateCalendar = {
    name: 'DateCalendar',
    props: ['value', 'isMobile', 'minimumDate', 'hideLabel', 'hideIcon'],
    data() {
        return {
          showCalendar: false,
          pickDateRules: (v) => !!v || 'Date is required',
          countryDF: DATE_FORMAT
        };
      },

 

      computed: {
        date: {
          get() {
            return this.value;
          },
          set(newValue) {
            this.$emit('input', newValue);
          },
        },
        displayDate() {
          return formattedDate(this.date, this.countryDF);
        },
        label() {
          if (this.hideLabel) {
            if (!this.displayDate) return this.countryDF;
            else return '';
          } else return this.countryDF;
        },
        icon() {
          if (this.hideIcon) return '';
          else return 'far fa-calendar-alt';
        },
      },
      methods: {
        checkPastDate() {
          let currentData = moment(new Date()).format('YYYY-MM-DD');
          let selectedDate = this.date;
          if (moment(currentData).isAfter(selectedDate)) {
            return 'Select date after current date.';
          }
          return true;
        },
        openCalendar(){
          this.showCalendar = true;
      },
      },

  
      template: 
      ` <div ref="attachHolder">
      <v-menu
      :attach="$refs.attachHolder"
      v-bind="$attrs"
      content-class="date-picker-backoffice"
      v-model="showCalendar"
      :open-on-focus="true"
      :close-on-content-click="false"
      :nudge-right="50"
      transition="scale-transition"
      min-width="290px"
    >
      <template v-slot:activator="{ on, attrs }">
        <div class="dropoff-location-wrapper">
          <v-text-field
            outlined
            v-model="displayDate"
            :placeholder="countryDF"
            :prepend-inner-icon="icon"
            readonly
            v-bind="attrs"
            v-on="on"
            :rules="[pickDateRules, checkPastDate]"
            @mousedown.prevent="openCalendar"
          >
          </v-text-field>
        </div>
      </template>
      <v-date-picker
        v-if="!isMobile"
        v-model="date"
        :min="minimumDate"
        @input="showCalendar = false"
        no-title
      />
    </v-menu>
    </div>
    `
};