sigpro-ui/components/Datepicker.js

// components/Datepicker.js
import { $, h, when, watch } from "sigpro";
import { Calendar } from "./Calendar.js";

export const Datepicker = (props) => {
  const isOpen = $(false);
  const isRangeMode = () => {
    const r = typeof props.range === "function" ? props.range() : props.range;
    return r === true;
  };
  
  const displayValue = $("");
  
  watch(() => {
    const v = typeof props.value === "function" ? props.value() : props.value;
    if (!v) {
      displayValue("");
      return;
    }
    let text = "";
    if (typeof v === "string") {
      text = (props.hour && v.includes("T")) ? v.replace("T", " ") : v;
    } else if (v.start && v.end) {
      const startStr = props.hour && v.startHour !== undefined 
        ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` 
        : v.start;
      const endStr = props.hour && v.endHour !== undefined 
        ? `${v.end} ${String(v.endHour).padStart(2, "0")}:00` 
        : v.end;
      text = `${startStr} - ${endStr}`;
    } else if (v.start) {
      const startStr = props.hour && v.startHour !== undefined 
        ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` 
        : v.start;
      text = `${startStr}...`;
    }
    displayValue(text);
  });
  
  const handleCalendarChange = (newValue) => {
    if (typeof props.value === "function") props.value(newValue);
    if (!isRangeMode() || (newValue?.end !== undefined && newValue?.end !== null)) {
      isOpen(false);
    }
  };
  
  const toggleOpen = (e) => {
    e.stopPropagation();
    isOpen(!isOpen());
  };
  
  return h("div", { class: `relative w-full ${props.class ?? ''}` }, [
    h("label", { class: "input input-bordered w-full", onclick: toggleOpen }, [
      h("span", { class: "icon-[lucide--calendar]" }),
      h("input", {
        ...props,
        type: "text",
        class: "grow",
        value: displayValue,
        readonly: true,
        placeholder: props.placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha...")
      })
    ]),
    
    when(isOpen, () =>
      h("div", {
        class: "absolute left-0 mt-2 z-[100]",
        onclick: (e) => e.stopPropagation()
      }, [
        Calendar({
          value: props.value,
          range: isRangeMode(),
          hour: props.hour,
          onChange: handleCalendarChange
        })
      ])
    ),
    
    when(isOpen, () => 
      h("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })
    )
  ]);
};