// AUTO-GENERATED by scripts/generate-wrappers.mjs — do not edit by hand.
import { defineComponent, h, onMounted, onBeforeUnmount } from 'vue';
import { DatePicker } from '@42/core/date-picker';
import { useC42 } from '../useC42';

/**
 * Calendar date selection with single/range modes
 *
 * Vue wrapper for the `DatePicker` controller (`@42/core/date-picker`). Props mirror
 * the controller options; events are re-emitted with the CustomEvent detail.
 * Place the controller markup in the default slot.
 */
export default defineComponent({
  name: 'DatePicker',
  props: {
    "mode": { required: false }, // 'single' | 'range'
    "defaultValue": { required: false }, // DateInput | null
    "defaultRange": { type: Object, required: false }, // { start: DateInput
    "end": { required: false }, // DateInput } | null
    "min": { required: false }, // DateInput
    "max": { required: false }, // DateInput
    "weekStartsOn": { required: false }, // 0 | 1 | 2 | 3 | 4 | 5 | 6
    "locale": { type: String, required: false }, // string
    "formatLabel": { type: Function, required: false }, // (date: Date) => string
    "placeholder": { type: String, required: false }, // string
    "closeOnSelect": { type: Boolean, required: false }, // boolean
    "placement": { required: false }, // Placement
    "offset": { type: Number, required: false }, // number
  },
  emits: ["datepicker:change", "datepicker:open", "datepicker:close"],
  setup(props, { slots, emit }) {
    const options = () => {
      const out: Record<string, unknown> = {};
      for (const key of ["mode", "defaultValue", "defaultRange", "end", "min", "max", "weekStartsOn", "locale", "formatLabel", "placeholder", "closeOnSelect", "placement", "offset"] as const) {
        const value = (props as Record<string, unknown>)[key];
        if (value !== undefined) out[key] = value;
      }
      return out as Partial<Record<string, unknown>>;
    };
    const el = useC42(DatePicker, options);

    const listeners: Array<[string, (event: Event) => void]> = [
      ["datepicker:change", (event: Event) => emit("datepicker:change", (event as CustomEvent).detail)],
      ["datepicker:open", (event: Event) => emit("datepicker:open", (event as CustomEvent).detail)],
      ["datepicker:close", (event: Event) => emit("datepicker:close", (event as CustomEvent).detail)],
    ];
    onMounted(() => {
      const node = el.value;
      if (!node) return;
      for (const [name, handler] of listeners) node.addEventListener(name, handler);
    });
    onBeforeUnmount(() => {
      const node = el.value;
      if (!node) return;
      for (const [name, handler] of listeners) node.removeEventListener(name, handler);
    });

    return () => h('div', { ref: el }, slots.default ? slots.default() : undefined);
  },
});

// Component id in @42/core manifest: date-picker