<script setup lang="ts">
import { ref } 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 'flatpickr/dist/plugins/monthSelect/style.css'

//const months = Array.from({ length: 12 }, (_, i) => i + 1);
//const selectedMonth = ref(new Date().getMonth() + 1);

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({ 
  //mode: "range", 
  wrap: true, // set wrap to true only when using 'input-group' 
  defaultDate: value.data,
  locale: German, // locale for this instance only
  plugins: [
    new monthSelectPlugin({
      shorthand: true, //defaults to false
      dateFormat: 'Y\\Mm', //defaults to "F Y"
    }),
  ],
});
</script>

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

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