sigpro-ui/components/Datepicker.js

// components/Datepicker.js
import { $, Tag, If, Watch } from "sigpro";
import { Calendar } from "./Calendar.js";

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