<script setup>
import { Icon } from "@iconify/vue";
import { format as formatDate, isValid, parse as parseDate } from "date-fns";
import { computed, ref, watch } from "vue";
import { cn } from "../../../utils/cn";
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "../input-group";
defineOptions({ name: "UiDatePickerInput", inheritAttrs: false });
const props = defineProps({
  modelValue: { type: Date, required: false },
  format: { type: String, required: true },
  placeholder: { type: String, required: false },
  clearable: { type: Boolean, required: false, default: true },
  disabled: { type: Boolean, required: false },
  readonly: { type: Boolean, required: false },
  open: { type: Boolean, required: false },
  prefixIcon: { type: String, required: false },
  clearIcon: { type: String, required: false, default: "fluent:dismiss-20-regular" },
  size: { type: String, required: false, default: "md" },
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
});
const sizeClass = computed(() => ({
  sm: "h-7 text-xs",
  md: "h-9 text-sm",
  lg: "h-10 text-base"
})[props.size]);
const emits = defineEmits(["update:modelValue", "focus", "blur", "clear"]);
const draft = ref("");
const focused = ref(false);
function syncFromModel() {
  draft.value = props.modelValue ? formatDate(props.modelValue, props.format) : "";
}
watch(
  () => [props.modelValue, props.format],
  () => {
    if (!focused.value) syncFromModel();
  },
  { immediate: true }
);
function commit() {
  const text = draft.value.trim();
  if (!text) {
    if (props.modelValue !== void 0) {
      emits("update:modelValue", void 0);
    }
    return;
  }
  const parsed = parseDate(text, props.format, props.modelValue ?? /* @__PURE__ */ new Date());
  if (!isValid(parsed)) {
    syncFromModel();
    return;
  }
  emits("update:modelValue", parsed);
}
function onFocus(event) {
  focused.value = true;
  emits("focus", event);
}
function onBlur(event) {
  focused.value = false;
  commit();
  emits("blur", event);
}
function onClear() {
  draft.value = "";
  emits("update:modelValue", void 0);
  emits("clear");
}
const showClear = computed(
  () => props.clearable && !props.disabled && !props.readonly && props.modelValue !== void 0
);
</script>

<template>
  <InputGroup
    v-bind="$attrs"
    data-slot="date-picker-input"
    :data-disabled="props.disabled ? 'true' : void 0"
    :data-state="props.open ? 'open' : void 0"
    :class="cn('group/date-picker-input', sizeClass, props.class)"
  >
    <InputGroupAddon
      v-if="props.prefixIcon"
      align="inline-start"
    >
      <Icon :icon="props.prefixIcon" />
    </InputGroupAddon>
    <InputGroupInput
      :model-value="draft"
      :placeholder="props.placeholder"
      :disabled="props.disabled"
      :readonly="props.readonly"
      @update:model-value="(value) => draft = String(value)"
      @focus="onFocus"
      @blur="onBlur"
      @keydown.enter.prevent="commit"
    />
    <InputGroupAddon
      v-if="showClear"
      align="inline-end"
      :class="cn(
  '[@media(hover:hover)]:opacity-0 transition-opacity',
  'group-hover/date-picker-input:opacity-100 focus-within:opacity-100'
)"
    >
      <InputGroupButton
        size="icon-xs"
        data-slot="date-picker-clear"
        class="text-zinc-500 hover:text-zinc-700"
        tabindex="-1"
        @mousedown.prevent
        @click.stop="onClear"
      >
        <Icon :icon="props.clearIcon" />
      </InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
</template>
