<template>
  <div class="columns is-mobile is-multiline mx-0">
    <span
      v-for="(year, i) in years"
      :key="year"
      :class="['column is-4 has-text-centered is-clickable fs-14', (i === 0 || i === 11) && 'has-text-grey-light']"
      @click="$emit('year', year)"
    >
      {{ year }}
    </span>
  </div>
</template>
<script setup>
const props = defineProps({
  year: Number,
  month: Number,
  action: Object,
});

const emit = defineEmits(["caption"]);
const years = ref(
  Array.from({ length: 12 })
    .fill(props.year)
    .map((y, i) => y + i - 6),
);
emit("caption", `${years.value[1]} – ${years.value[10]}`);

watch(
  () => props.action,
  (newVal) => {
    if (newVal.name === "next") next();
    if (newVal.name === "previous") previous();
  },
);

watch(years, () => {
  emit("caption", `${years.value[1]} – ${years.value[10]}`);
});

function next() {
  const baseYear = years.value[11];
  years.value = Array.from({ length: 12 })
    .fill(baseYear)
    .map((y, i) => y + i - 6);
}

function previous() {
  const baseYear = years.value[0];
  years.value = Array.from({ length: 12 })
    .fill(baseYear)
    .map((y, i) => y + i - 6);
}
</script>
