<script setup>
import { Icon } from "@iconify/vue";
import { TimeField } from "reka-ui/namespaced";
import { computed } from "vue";
import { cn } from "../../../utils/cn";
defineOptions({ name: "UiDateRangePickerTimeInput", inheritAttrs: false });
const props = defineProps({
  startValue: { type: Object, required: false },
  endValue: { type: Object, required: false },
  granularity: { type: String, required: false, default: "second" },
  hourCycle: { type: Number, required: false, default: 24 },
  rangeSeparatorIcon: { type: String, required: false, default: "lucide:arrow-right" },
  prefixIcon: { type: String, required: false },
  clearIcon: { type: String, required: false, default: "fluent:dismiss-20-regular" },
  clearable: { type: Boolean, required: false, default: true },
  disabled: { type: Boolean, required: false },
  readonly: { type: Boolean, required: false },
  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:startValue", "update:endValue", "clear"]);
function onStartUpdate(value) {
  emits("update:startValue", value ?? void 0);
}
function onEndUpdate(value) {
  emits("update:endValue", value ?? void 0);
}
function onClear() {
  emits("update:startValue", void 0);
  emits("update:endValue", void 0);
  emits("clear");
}
const showClear = computed(
  () => props.clearable && !props.disabled && !props.readonly && (props.startValue !== void 0 || props.endValue !== void 0)
);
</script>

<template>
  <div
    v-bind="$attrs"
    data-slot="date-range-picker-time-input"
    :data-disabled="props.disabled ? 'true' : void 0"
    :class="cn(
  'group/date-range-time-input',
  'border-zinc-200 relative flex w-full min-w-0 items-center rounded-md border bg-transparent transition-[color,box-shadow] outline-none',
  'data-[disabled=true]:bg-zinc-100',
  'has-[[data-reka-time-field-input]:focus]:border-(--primary)',
  'hover:border-zinc-300',
  sizeClass,
  props.class
)"
  >
    <Icon
      v-if="props.prefixIcon"
      :icon="props.prefixIcon"
      class="text-zinc-500 ml-3 mr-1 size-4 shrink-0"
    />
    <TimeField.Root
      v-slot="{ segments }"
      data-slot="date-range-picker-time-start"
      :model-value="props.startValue"
      :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="onStartUpdate"
    >
      <template v-if="Array.isArray(segments)">
        <template
          v-for="(segment, index) in segments"
          :key="`s-${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>
    <Icon
      :icon="props.rangeSeparatorIcon"
      data-slot="date-range-picker-time-separator"
      class="text-zinc-400 size-3.5 shrink-0"
    />
    <TimeField.Root
      v-slot="{ segments }"
      data-slot="date-range-picker-time-end"
      :model-value="props.endValue"
      :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="onEndUpdate"
    >
      <template v-if="Array.isArray(segments)">
        <template
          v-for="(segment, index) in segments"
          :key="`e-${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>
    <button
      v-if="showClear"
      type="button"
      data-slot="date-range-picker-clear"
      tabindex="-1"
      :class="cn(
  'mr-2 size-5 shrink-0 rounded text-zinc-500 transition-opacity hover:text-zinc-700',
  '[@media(hover:hover)]:opacity-0',
  'group-hover/date-range-time-input:opacity-100 focus-within:opacity-100',
  'flex items-center justify-center'
)"
      @mousedown.prevent
      @click.stop="onClear"
    >
      <Icon
        :icon="props.clearIcon"
        class="size-3.5"
      />
    </button>
  </div>
</template>
