<script setup>
import { CalendarDate, CalendarDateTime, getLocalTimeZone, Time, today } from "@internationalized/date";
import { Icon } from "@iconify/vue";
import { TimeField } from "reka-ui/namespaced";
import { computed } from "vue";
import { cn } from "../../../utils/cn";
import { Calendar } from "../calendar";
defineOptions({ name: "UiDatePickerDateTimePanel" });
const props = defineProps({
  modelValue: { type: Object, required: false },
  isDateDisabled: { type: Function, required: false },
  granularity: { type: String, required: false, default: "second" },
  hourCycle: { type: Number, required: false, default: 24 },
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
});
const emits = defineEmits(["update:modelValue"]);
const datePart = computed(() => {
  const v = props.modelValue;
  if (!v) return void 0;
  return new CalendarDate(v.year, v.month, v.day);
});
const timePart = computed(() => {
  const v = props.modelValue;
  if (!v) return void 0;
  return new Time(v.hour, v.minute, v.second);
});
function setDatePart(value) {
  const next = Array.isArray(value) ? value[0] : value;
  if (!next) {
    emits("update:modelValue", void 0);
    return;
  }
  const base = props.modelValue;
  const day = "day" in next ? next.day : 1;
  emits(
    "update:modelValue",
    new CalendarDateTime(
      next.year,
      next.month,
      day,
      base?.hour ?? 0,
      base?.minute ?? 0,
      base?.second ?? 0
    )
  );
}
function setTimePart(value) {
  if (!value) {
    if (props.modelValue) {
      emits(
        "update:modelValue",
        new CalendarDateTime(
          props.modelValue.year,
          props.modelValue.month,
          props.modelValue.day,
          0,
          0,
          0
        )
      );
    }
    return;
  }
  const time = value;
  const base = props.modelValue;
  if (base) {
    emits(
      "update:modelValue",
      new CalendarDateTime(
        base.year,
        base.month,
        base.day,
        time.hour,
        time.minute,
        time.second
      )
    );
    return;
  }
  const td = today(getLocalTimeZone());
  emits(
    "update:modelValue",
    new CalendarDateTime(
      td.year,
      td.month,
      td.day,
      time.hour,
      time.minute,
      time.second
    )
  );
}
</script>

<template>
  <div
    data-slot="date-picker-datetime-panel"
    :class="cn('flex flex-col', props.class)"
  >
    <Calendar
      :model-value="datePart"
      :default-placeholder="datePart"
      :is-date-disabled="props.isDateDisabled"
      @update:model-value="setDatePart"
    >
      <template #calendar-prev-icon>
        <Icon icon="lucide:chevron-left" />
      </template>
      <template #calendar-next-icon>
        <Icon icon="lucide:chevron-right" />
      </template>
    </Calendar>
    <div class="border-zinc-200 flex items-center gap-2 border-t p-3">
      <Icon
        icon="lucide:clock"
        class="text-zinc-500 size-4 shrink-0"
      />
      <TimeField.Root
        v-slot="{ segments }"
        :model-value="timePart"
        :granularity="props.granularity"
        :hour-cycle="props.hourCycle"
        class="text-zinc-700 flex flex-1 items-center justify-center gap-1.5 px-4 text-sm outline-none"
        @update:model-value="setTimePart"
      >
        <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>
    </div>
  </div>
</template>
