<template>
	<input
		class="form-control"
		type="text"
		v-model="value"
		:autocomplete="fieldOptions.autocomplete"
		:disabled="disabled"
		:placeholder="placeholder"
		:readonly="readonly"
		:name="inputName"/>
</template>

<script>
import abstractField from '../abstractField';
import { defaults } from 'lodash';
import dateFieldHelper from '../../utils/dateFieldHelper';

export default {
  name: 'field-pikaday',
  mixins: [abstractField],
  data() {
    return { picker: null };
  },

  methods: {
    ...dateFieldHelper
  },

  mounted() {
    this.$nextTick(() => {
      if (window.Pikaday) {
        this.picker = new window.Pikaday(
          defaults(this.fieldOptions, {
            field: this.$el, // bind the datepicker to a form field
            onSelect: () => {
              this.value = this.picker.toString();
            }
            // trigger: , // use a different element to trigger opening the datepicker, see [trigger example][] (default to `field`)
          })
        );
      } else {
        console.warn(
          'Pikaday is missing. Please download from https://github.com/dbushell/Pikaday/ and load the script and CSS in the HTML head section!'
        );
      }
    });
  },

  beforeDestroy() {
    if (this.picker) this.picker.destroy();
  }
};
</script>
