<template>
  <div class="d-flex root">
    <v-text-field type="number" v-model="year"
                  rounded="0" :hide-details="hideDetails" single-line class="all year" maxlength="4"/>
    <v-select v-model="month" :items="monthItems"
              rounded="0" :hide-details="hideDetails" single-line class="all month"/>
    <v-text-field type="number" v-model="day"
                  rounded="0" :hide-details="hideDetails" single-line class="all year"
                  min="1" :max="now.daysInMonth" maxlength="2"/>
    <v-text-field type="time" v-model="time"
                  rounded="0" :hide-details="hideDetails" single-line class="all"/>
  </div>
</template>

<script setup>
import {usePrefStore, useStore} from "@/store/store";
import {computed} from "vue";
import {DateTime, Info} from "luxon";

const prefs = usePrefStore()
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const hideDetails = true

const now = computed(()=>DateTime.fromSeconds(props.modelValue?props.modelValue:0).setZone(prefs.timezone))

const year = computed({
  get() { return now.value.year },
  set(v) { update({year:v}) }
})

const month = computed({
  get() { return now.value.month },
  set(v) { update({month:v}) }
})

const monthItems = []
const monthNames = Info.months();
for( let i=0; i<12; i++ )
  monthItems.push({value: i+1, title: monthNames[i]})

const day = computed({
  get() { return now.value.day },
  set(v) { update({day:v}) }
})


const time = computed({
  get() {
    const date = now.value
    const hour = date.hour
    const min = date.minute
    return hour.toString().padStart(2,'0') + ':' + min.toString().padStart(2,'0')
  },
  set(v) {
    const [hour,minute] = v.split(':')
    update({hour:hour, minute:minute})
  }
})

function update(fields={}) {
  if (Object.keys(fields).length)
    emit('update:modelValue', now.value.set(fields).toUnixInteger())
}

</script>

<style scoped lang="scss">
.root {
  $height: 3.3em;
  margin-bottom: 0;
  height: $height;
  min-height: $height;
  max-height: $height;
  overflow-y: hidden;
}

.year {
  width: 6em;
  max-width: 6em;
  min-width: 6em;
}

.month {
  width: 10em;
  max-width: 10em;
  min-width: 6em;
}

.day {
  width: 4em;
  max-width: 4em;
  min-width: 4em;
}

.picker {
  width: 8em;
  height: 2em;
}
</style>
