<script setup>
import InputLabel from "./InputLabel.vue";
import InputError from "./InputError.vue";
import { computed } from "vue";
import VueDatePicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";

/*
  DatePickerField (vue-datepicker wrapper)
  - Replaces previous v-calendar usage to avoid range/dayIndex runtime errors.
  - Keeps API compatible with existing callers.
  Props:
    - modelValue: Date | string | number | null
    - id: string
    - label: string
    - format: string (default 'dd.MM.yyyy')
    - enableTimePicker: boolean (default false)
    - inline: boolean (default false)
    - placeholder: string
    - error: string | string[]
    - legacy props (teleportTarget, autoPosition, menuClassName, fixed, closeOnAutoApply, closeOnScroll)
      are accepted for compatibility but only mapped where applicable.
*/

const props = defineProps({
  modelValue: { type: [Date, String, Number, null], default: null },
  id: { type: String, default: undefined },
  label: { type: String, default: undefined },
  format: { type: String, default: "dd.MM.yyyy" },
  enableTimePicker: { type: Boolean, default: false },
  inline: { type: Boolean, default: false },
  // legacy props maintained for compatibility
  autoApply: { type: Boolean, default: false },
  teleportTarget: { type: [Boolean, String], default: "body" },
  autoPosition: { type: Boolean, default: true },
  menuClassName: { type: String, default: "dp-over-modal" },
  fixed: { type: Boolean, default: true },
  closeOnAutoApply: { type: Boolean, default: true },
  closeOnScroll: { type: Boolean, default: true },
  placeholder: { type: String, default: "" },
  error: { type: [String, Array], default: undefined },
});

const emit = defineEmits(["update:modelValue", "change"]);

const valueProxy = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit("update:modelValue", val);
    emit("change", val);
  },
});

// vue-datepicker accepts format like 'dd.MM.yyyy' and controls 24h time via is-24 prop
const inputClasses =
  "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500";
</script>

<template>
  <div class="col-span-6 sm:col-span-4">
    <InputLabel v-if="label" :for="id" :value="label" />

    <VueDatePicker
      v-model="valueProxy"
      :format="format"
      :enable-time-picker="enableTimePicker"
      :is-24="true"
      :inline="inline"
      :auto-apply="autoApply"
      :teleport="false"
      :close-on-auto-apply="closeOnAutoApply"
      :close-on-scroll="closeOnScroll"
      :input-class-name="inputClasses"
      :menu-class-name="'z-[1000]'"
      :locale="'sl'"
      :id="id"
      :placeholder="placeholder"
    />

    <template v-if="error">
      <InputError
        v-if="Array.isArray(error)"
        v-for="(e, idx) in error"
        :key="idx"
        :message="e"
      />
      <InputError v-else :message="error" />
    </template>
  </div>
</template>

<style>
/* vue-datepicker provides its own menu layering; base CSS imported above */
</style>
