<template>
  <div class="flex flex-wrap gap-2">
    <label
      v-for="year in availableYears"
      :key="year"
      class="label cursor-pointer gap-2 p-0"
    >
      <input
        type="checkbox"
        class="checkbox checkbox-sm checkbox-primary"
        :checked="modelValue.includes(year)"
        @change="toggleYear(year)"
      />
      <span class="label-text">{{ year }}</span>
    </label>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  modelValue: number[];
  yearsBack?: number;
}

const props = withDefaults(defineProps<Props>(), {
  yearsBack: 3
});

const emit = defineEmits<{
  (e: 'update:modelValue', value: number[]): void;
}>();

const currentYear = new Date().getFullYear();

const availableYears = computed(() => {
  const years: number[] = [];
  for (let i = 0; i <= props.yearsBack; i++) {
    years.push(currentYear - i);
  }
  return years;
});

function toggleYear(year: number) {
  const newValue = [...props.modelValue];
  const index = newValue.indexOf(year);

  if (index === -1) {
    newValue.push(year);
  } else if (newValue.length > 1) {
    // Don't allow deselecting the last year
    newValue.splice(index, 1);
  }

  // Sort descending
  newValue.sort((a, b) => b - a);
  emit('update:modelValue', newValue);
}
</script>
