<template>
  <div
    data-test="year-picker"
    class="grid grid-cols-3 gap-3"
  >
    <button
      v-for="year in years"
      :key="year"
      type="button"
      data-test="year"
      :data-year="year"
      :disabled="!isYearInRange(year, min, max)"
      :aria-disabled="!isYearInRange(year, min, max)"
      class="flex h-[45px] w-full items-center justify-center"
      :class="isYearInRange(year, min, max) ? 'cursor-pointer' : 'cursor-not-allowed'"
      @click="emit('select', year)"
    >
      <span
        class="flex h-[30px] w-full items-center justify-center rounded text-sm transition-colors duration-100"
        :class="year === selectedYear
          ? 'bg-m-primary text-white'
          : isYearInRange(year, min, max)
            ? 'text-black hover:bg-m-primary/10'
            : 'text-m-muted/30'"
      >
        {{ year }}
      </span>
    </button>
  </div>
</template>

<script setup lang="ts">
import {computed} from 'vue'
import {isYearInRange} from '../composables/dateFormat'

defineOptions({name: 'MalioDateYearPicker'})

const props = defineProps<{
  pageStart: number
  selectedYear?: number
  min?: string
  max?: string
}>()

const emit = defineEmits<{(e: 'select', year: number): void}>()

const years = computed(() => Array.from({length: 12}, (_, i) => props.pageStart + i))
</script>
