<script setup>
import { Icon } from "@iconify/vue";
import { TimeField } from "reka-ui/namespaced";
import { computed } from "vue";
import { cn } from "../../../utils/cn";
import { InputGroup, InputGroupAddon, InputGroupButton } from "../input-group";
defineOptions({ name: "UiDatePickerTimeInput", inheritAttrs: false });
const props = defineProps({
  modelValue: { type: Object, required: false },
  granularity: { type: String, required: false, default: "second" },
  hourCycle: { type: Number, required: false, default: 24 },
  disabled: { type: Boolean, required: false },
  readonly: { type: Boolean, required: false },
  clearable: { type: Boolean, required: false, default: true },
  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", "clear"]);
const showClear = computed(
  () => props.clearable && !props.disabled && !props.readonly && props.modelValue !== void 0
);
function onFieldUpdate(value) {
  emits("update:modelValue", value ?? void 0);
}
function onClear() {
  emits("update:modelValue", void 0);
  emits("clear");
}
</script>

<template>
  <InputGroup
    v-bind="$attrs"
    data-slot="date-picker-time-input"
    :data-disabled="props.disabled ? 'true' : void 0"
    :class="cn('group/date-picker-input', sizeClass, props.class)"
  >
    <InputGroupAddon
      v-if="props.prefixIcon"
      align="inline-start"
    >
      <Icon :icon="props.prefixIcon" />
    </InputGroupAddon>
    <TimeField.Root
      v-slot="{ segments }"
      data-slot="input-group-control"
      :model-value="props.modelValue"
      :granularity="props.granularity"
      :hour-cycle="props.hourCycle"
      :disabled="props.disabled"
      :readonly="props.readonly"
      class="text-zinc-700 flex flex-1 items-center justify-center gap-1.5 px-4 outline-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
      @update:model-value="onFieldUpdate"
    >
      <template v-if="Array.isArray(segments)">
        <template
          v-for="(segment, index) in segments"
          :key="`${segment.part}-${index}`"
        >
          <TimeField.Input
            v-if="segment.part !== 'literal'"
            :part="segment.part"
            class="rounded-sm px-1 outline-none focus:bg-zinc-100 data-[placeholder]:text-zinc-400"
          >
            {{ segment.value }}
          </TimeField.Input>
          <span
            v-else
            class="text-zinc-400 select-none"
          >{{ segment.value }}</span>
        </template>
      </template>
    </TimeField.Root>
    <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"
        as-child
      >
        <button
          type="button"
          data-slot="date-picker-clear"
          class="text-zinc-500 transition-colors hover:text-zinc-700"
          tabindex="-1"
          @mousedown.prevent
          @click.stop="onClear"
        >
          <Icon :icon="props.clearIcon" />
        </button>
      </InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
</template>
