<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { computed } from 'vue';
import moment from 'moment';
import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
import { German } from 'flatpickr/dist/l10n/de.js';
//import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect/index.js'
import weekSelect from 'flatpickr/dist/plugins/weekSelect/weekSelect.js'

const props = defineProps({ modelValue: { type: Object, required: true } });
const emit = defineEmits(['update:modelValue']);

const value = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit('update:modelValue', value.value);
  },
})

//const date = ref(null);
const config = ref({
  wrap: true, // set wrap to true only when using 'input-group'
  dateFormat: 'Y-m-d',
  defaultDate: value.data,
  locale: German, // locale for this instance only
  "plugins": [new weekSelect({})],
  weekNumbers: true,
  getWeek: function(dateObj) {
    const current = moment(dateObj).startOf('isoWeek');
    return `${current.isoWeekYear()}W${current.isoWeek().toString().padStart(2, '0')}`;        
    },
    formatDate: (date, format, locale) => {
    const current = moment(date).startOf('isoWeek');
    return `${current.isoWeekYear()}W${current.isoWeek().toString().padStart(2, '0')}`;        
  }
});

;
</script>

<template>
  <div class="week-selector">
    <flat-pickr v-model="value.data" :config="config" class="form-control" placeholder="Select date" name="date" />

  </div>
</template>

<style scoped>
.select-input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
}
</style>
