<template>
  <b-form-datepicker
    v-model="object.value"
    class="formgeneratordatepicker"
    :locale="languageCode"
    :disabled="disabledMode || locked"
    :required="required"
    calendar-width="100%"
    start-weekday="1"
    :state="state"
    @input="input"
  />
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';

import { BFormDatepicker } from 'bootstrap-vue';
import type { NamedNode, Quad_Object } from 'rdf-js';
import factory from 'rdf-ext';
import { prefixes } from '@zazuko/rdf-vocabularies';

export default Vue.extend({
  name: 'InputDatePicker',
  components: {
    BFormDatepicker,
  },
  props: {
    languageCode: {
      default: 'en',
      type: String,
    },
    locked: {
      default: false,
      type: Boolean,
    },
    required: {
      default: false,
      type: Boolean,
    },
    entry: {
      required: true,
      type: Object as PropType<Quad_Object>,
    },
    dataType: {
      default: () => factory.namedNode(prefixes.xsd + 'date'),
      type: Object as PropType<NamedNode<string>>,
    },
    disabledMode: {
      default: false,
      type: Boolean,
    },
    state: {
      type: [Boolean, Object],
      default: null,
    },
  },
  data() {
    return {
      object: factory.literal('', this.dataType),
    };
  },
  watch: {
    entry() {
      this.loadData();
    },
  },
  mounted() {
    this.loadData();
    // take whatever is defined in metadata now and try to get the content if we are not in fixed value mode
    this.replacePlaceholder();
  },
  methods: {
    loadData() {
      if (this.object.value !== this.entry.value) {
        this.object.value = this.entry.value;
      }
    },
    replacePlaceholder() {
      if (this.entry.value === '{TODAY}') {
        const today = new Date();
        const dd = String(today.getDate()).padStart(2, '0');
        const mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
        const yyyy = today.getFullYear();
        this.object.value = yyyy + '-' + mm + '-' + dd;

        this.$emit('input', this.object);
        this.$emit('triggerValidation');
      }
    },
    input() {
      this.$emit('input', this.object);
    },
  },
});
</script>

<style scoped>
.formgeneratordatepicker >>> label {
  display: flex;
  align-items: center;
}
.formgeneratordatepicker >>> div.is-valid {
  background-image: unset;
}
.formgeneratordatepicker >>> footer {
  display: none;
}
.formgeneratordatepicker >>> button {
  min-width: unset;
  margin: unset;
}
.formgeneratordatepicker >>> .b-calendar button {
  min-width: unset;
}
</style>