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

const dateValue = ref(
  `${new Date().getDate().toString().length == 1 ? `0${new Date().getDate()}` : new Date().getDate()}-${(new Date().getMonth() + 1).toString().length == 1 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1}-${new Date().getFullYear()} s/d ${new Date().getDate().toString().length == 1 ? `0${new Date().getDate()}` : new Date().getDate()}-${(new Date().getMonth() + 1).toString().length == 1 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1}-${new Date().getFullYear()}`
)
const formatter = ref({
  date: 'DD-MM-YYYY',
  month: 'MMMM'
})
const emit = defineEmits(['update:dateValue'])

const customShortcuts = () => {
  return [
    {
      label: 'Hari Ini',
      atClick: () => {
        const date = new Date()
        return [new Date(date.setHours(0, 0, 0, 0)), new Date()]
      }
    },
    {
      label: 'Kemarin',
      atClick: () => {
        const date = new Date()
        return [new Date(date.setDate(date.getDate() - 1)), new Date(date.setHours(0, 0, 0, 0))]
      }
    },
    {
      label: '7 Hari Terakhir',
      atClick: () => {
        const date = new Date()
        return [new Date(date.setDate(date.getDate() - 7)), new Date()]
      }
    },
    {
      label: '15 Hari Terakhir',
      atClick: () => {
        const date = new Date()
        return [new Date(date.setDate(date.getDate() - 15)), new Date()]
      }
    },
    {
      label: '30 Hari Terakhir',
      atClick: () => {
        const date = new Date()
        return [new Date(date.setDate(date.getDate() - 30)), new Date()]
      }
    },
    {
      label: '3 Bulan Terakhir',
      atClick: () => {
        const date = new Date()
        return [new Date(date.setMonth(date.getMonth() - 3)), new Date()]
      }
    },
    {
      label: '6 Bulan Terakhir',
      atClick: () => {
        const date = new Date()
        return [new Date(date.setMonth(date.getMonth() - 6)), new Date()]
      }
    },
    {
      label: '1 Tahun Terakhir',
      atClick: () => {
        const date = new Date()
        return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()]
      }
    }
  ]
}

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

onMounted(() => {
  emit('update:dateValue', dateValue.value)
})
</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>
