<script setup lang="ts">
import VueDatePicker from '@vuepic/vue-datepicker';
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import { useI18n } from 'vue-i18n';

const i18n = useI18n();
const model = defineModel<string | Date | null>();

const props = defineProps<{
  id?: string;
  readonly?: boolean;
  clearable?: boolean;
  label?: string;
  rules?: ((value: string) => string | true)[];
  disabledDates?: string[] | Date[] | ((date: Date) => boolean);
}>();

function valueUpdate(value: string) {
  if (props.readonly) return;

  if (model.value && !(model.value instanceof Date)) {
    model.value = new Date(model.value);
  }

  if (value.length === 10) {
    const _date = parseAndFormatDate(value, i18n.locale.value);

    if (_date) {
      if (Array.isArray(props.disabledDates)) {
        const disabled = props.disabledDates.map((v) =>
          new Date(v).toISOString(),
        );
        if (disabled.includes(_date.toISOString())) {
          model.value = null;
        }
      }
      if (typeof props.disabledDates === 'function') {
        if (props.disabledDates(_date)) {
          model.value = null;
        }
      }

      if (model.value instanceof Date && !isNaN(model.value.getTime())) {
        model.value.setDate(_date.getDate());
        model.value.setMonth(_date.getMonth());
        model.value.setFullYear(_date.getFullYear());
      } else {
        model.value = _date;
      }
    }
  }
}
</script>

<template>
  <VueDatePicker
    utc
    auto-apply
    :id
    :for="id"
    :disabled="readonly"
    :disabled-dates="disabledDates"
    :teleport="true"
    :dark="$q.dark.isActive"
    :locale="$i18n.locale === 'tha' ? 'th' : 'en'"
    :enableTimePicker="false"
    v-model="model"
    class="col-2"
  >
    <template #year="{ value }">
      {{ $i18n.locale === 'tha' ? value + 543 : value }}
    </template>
    <template #year-overlay-value="{ value }">
      {{ $i18n.locale === 'tha' ? value + 543 : value }}
    </template>
    <template #trigger>
      <q-input
        placeholder="DD/MM/YYYY"
        hide-bottom-space
        dense
        outlined
        :rules
        :label
        :for="id"
        :readonly="readonly"
        :mask="readonly ? '' : '##/##/####'"
        :model-value="
          model
            ? readonly
              ? dateFormat(model)
              : dateFormat(model, false, false, true)
            : readonly
              ? '-'
              : undefined
        "
        @update:model-value="valueUpdate"
      >
        <template #prepend>
          <q-icon
            size="xs"
            name="mdi-calendar-blank-outline"
            class="cursor-pointer"
            color="primary"
          />
        </template>
        <template v-if="clearable" v-slot:append>
          <q-icon
            v-if="model && !readonly"
            name="mdi-close-circle"
            class="cursor-pointer app-text-muted"
            size="sm"
            @click.stop="model = undefined"
          />
        </template>
      </q-input>
    </template>
  </VueDatePicker>
</template>
