sigpro-ui/src/components/Datepicker.js

import { $, h, when, watch } from "sigpro";
import { val, ui, getIcon } from "../utils.js";
import { Input } from "./Input.js";
import { Calendar } from "./Calendar.js";

export const Datepicker = (props) => {
  const { class: className, value, range, label, placeholder, hour = false, ...rest } = props;
  
  const isOpen = $(false);
  const isRangeMode = () => val(range) === true;
  
  // Formatear el valor para mostrarlo en el input
  const displayValue = $("");
  
  watch(() => {
    const v = val(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);
    }
    // Cerrar el popover si es modo simple o si el rango está completo (end existe)
    if (!isRangeMode() || (newValue?.end !== undefined && newValue?.end !== null)) {
      isOpen(false);
    }
  };
  
  return h("div", { class: ui('relative w-full', className) }, [
    Input({
      label,
      placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
      value: displayValue,
      readonly: true,
      icon: getIcon("icon-[lucide--calendar]"),
      onclick: (e) => {
        e.stopPropagation();
        isOpen(!isOpen());
      },
      ...rest,
    }),
    
    when(isOpen, () =>
      h("div", {
        class: "absolute left-0 mt-2 z-[100]",
        onclick: (e) => e.stopPropagation(),
      }, [
        Calendar({
          value,
          range: isRangeMode(),
          hour,
          onChange: handleCalendarChange,
        }),
      ])
    ),
    
    when(isOpen, () => h("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
  ]);
};