<script setup lang="ts">
import { PhCalendarBlank } from '@phosphor-icons/vue'
import { ref, watch } from 'vue'
import VueTailwindDatepicker from 'vue-tailwind-datepicker'

const dateValue = ref('')
const formatter = ref({
  date: 'DD-MM-YYYY',
  month: 'MMMM'
})
const emit = defineEmits(['update:dateValue'])

const customShortcuts = () => {
  return [
    {
      label: 'Last 15 Days',
      atClick: () => {
        const date = new Date()
        return [new Date(date.setDate(date.getDate() - 15)), new Date()]
      }
    },
    {
      label: 'Last Years',
      atClick: () => {
        const date = new Date()
        return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()]
      }
    }
  ]
}

watch(dateValue, (newValue) => {
  emit('update:dateValue', newValue)
})
</script>

<template>
  <div class="flex">
    <vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator=" s/d " :shortcuts="customShortcuts"
      :auto-apply="true" as-single use-range v-slot="{ value, placeholder }">
      <div class="flex">
        <div class="flex-1">
          <button type="button"
            class="flex items-center justify-between w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0">
            <span class="text-gray-900">
              {{ value || placeholder }}
            </span>
            <PhCalendarBlank size="18" weight="regular" />
          </button>
        </div>
      </div>
    </vue-tailwind-datepicker>
  </div>
</template>
