<template>
  <div class="fixed-grid has-3-cols">
    <div
      class="grid"
      style="gap: 0.5rem 0"
    >
      <div
        v-for="(year, i) in years"
        :key="year"
        class="cell"
      >
        <button
          :class="['button is-white w-full fs-14', (i === 0 || i === 11) && 'has-text-grey-light']"
          @click="emit('year', year)"
        >
          {{ year }}
        </button>
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  year: Number,
  month: Number,
  action: Object,
});

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

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

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

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>
<style scoped>
.button {
  --bulma-button-color-l: 25%;
}
</style>
