<template>
  <div>
    <div class="text-center">Autóbérlés kezdete</div>
    <div class="flex flex-col p-3">
      <DatePicker inline :min-date="(new Date())" v-model="selectedDate"/>
    </div>

    <div class="flex flex-col p-3">
      Időpont
      <Dropdown :options="timeList" v-model="rent.auto_felvetel_idopont" />
    </div>
    <div class="p-3">
      <Button @click="next()" class="max-sm:w-full min-w-20" v-if="rent.auto_felvetel_datum && rent.auto_felvetel_idopont">Tovább</Button>
    </div>
  </div>
</template>

<script lang="ts" setup>
const {rent} = storeToRefs(useAuthStore())
definePageMeta({
  rentStep: 1,
  title:'Autóbérlés kezdete'
})

// Helyi Date objektum a DatePicker-hez
const selectedDate = ref<Date | null>(rent.value.auto_felvetel_datum ? new Date(rent.value.auto_felvetel_datum) : null)

// Ha változik a kiválasztott dátum, szöveggé alakítjuk (YYYY-MM-DD)
watch(selectedDate, (newDate) => {
  if (newDate) {
    const year = newDate.getFullYear()
    const month = String(newDate.getMonth() + 1).padStart(2, '0')
    const day = String(newDate.getDate()).padStart(2, '0')
    rent.value.auto_felvetel_datum = `${year}-${month}-${day}`
  } else {
    rent.value.auto_felvetel_datum = null
  }
})

function next() {
  navigateTo('/rent/place-from')
}

const timeList = computed(()=>{
  let a = []
  for(let i=0; i<24; i++){
    a.push(i+':00')
    a.push(i+':30')
  }
  return a
})

</script>

<style></style>