<template>
  <div class="w-full flex justify-between">
    <select class="bg-transparent" style="outline: none;" v-model="YY">
      <option class="dark:bg-black opacity-30" value="">év</option>
      <option :value="y" v-for="y in years" class="dark:bg-black">{{ y }}</option>
    </select>
    <select class="bg-transparent" style="outline: none;" placeholder="hónap" v-model="MM">
      <option class="dark:bg-black" value="">hónap</option>
      <option :value="m" v-for="m in months" class="dark:bg-black">{{ getMonthName(m) }}</option>
    </select>
    <select class="bg-transparent" style="outline: none;" v-model="DD">
      <option class="dark:bg-black" value="">nap</option>
      <option :value="d" v-for="d in days" class="dark:bg-black">{{ d }}</option>
    </select>
  </div>
</template>

<script lang="ts" setup>
const YY = ref('')
const MM = ref('')
const DD = ref('')
const props = defineProps<{
  modelValue?: string
}>()
const emits = defineEmits(['update:model-value'])

watch(() => props.modelValue, (newVal) => {
  if (newVal && !YY.value && !MM.value && !DD.value) {
    const parts = newVal.split('-')
    if (parts.length === 3) {
      YY.value = parts[0]
      MM.value = parseInt(parts[1], 10).toString()
      DD.value = parseInt(parts[2], 10).toString()
    }
  }
}, { immediate: true })
const years = computed(() => {
  let d = new Date()
  let i: any
  let a = []
  for (i = d.getFullYear() - 108; i < d.getFullYear() - 18; i++) {
    a.push(i)
  }
  return a.sort((a, b) => {
    return b - a
  })
})

const months = computed(() => {
  let a = []
  let i: any
  for (i = 1; i < 13; i++) {
    a.push(i)
  }
  return a
})

const days = computed(() => {
  if (YY.value && MM.value) {
    let list = new Date(YY.value, MM.value, 0).getDate()
    return list
  }
})

function getMonthName(m: any) {
  let a = ['', 'Január', 'Február', 'Március', 'Április', 'Május', 'Június', 'Július', 'Augusztus', 'Szeptember', 'Október', 'November', 'December']
  return a[m]
}

onUpdated(() => {
  let date
  if (YY.value && MM.value && DD.value) {
    date = YY.value
    date += '-'
    let _m = MM.value + ''
    _m = _m.padStart(2, '0')
    date += _m
    date += '-'
    let _d = DD.value + ''
    _d = _d.padStart(2, '0')
    date += _d
  }
  if (date) {
    emits('update:model-value',date)
  }
})

</script>

<style></style>