import { jsxs, jsx } from "react/jsx-runtime";
import { useId, useState, useEffect } from "react";
import { f as format, C as CalendarPicker } from "../../calendar-picker-BA_dIl4K.js";
import { Popover, PopoverTrigger, PopoverContent } from "../popover/popover.js";
import { ScrollArea } from "../scroll-area/scroll-area.js";
import { CalendarButton } from "../calendar-picker/calendar-button.js";
import { c as cn } from "../../cn-FAaWYZ6x.js";
import { InputButton } from "./date-picker-input-button.js";
import { Separator } from "../separator/separator.js";
const StCalendar = ({ width = 24, height = 24, color, style, ...otherProps }) => /* @__PURE__ */ jsxs("svg", { id: "icon_StCalendar", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width, height, style: {
  ...color && {
    "--stroke-color": color,
    "--stroke-fg-color": color
  },
  ...style
}, ...otherProps, children: [
  /* @__PURE__ */ jsx("path", { d: "M3 7C3 5.34315 4.34315 4 6 4H18C19.6569 4 21 5.34315 21 7V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V7Z", stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", vectorEffect: "non-scaling-stroke", strokeLinecap: "round" }),
  /* @__PURE__ */ jsx("path", { d: "M16 3V5", stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", vectorEffect: "non-scaling-stroke", strokeLinecap: "round" }),
  /* @__PURE__ */ jsx("path", { d: "M3 9H21", stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", vectorEffect: "non-scaling-stroke" }),
  /* @__PURE__ */ jsx("path", { d: "M8 3V5", stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", vectorEffect: "non-scaling-stroke", strokeLinecap: "round" })
] });
StCalendar.displayName = "StCalendar";
const DatePicker = ({
  value,
  onChange,
  placeholder,
  className,
  showTime = false,
  showDate = true,
  is24Hour = false,
  label,
  description
}) => {
  const id = useId();
  const descriptionId = `${id}-description`;
  const [date, setDate] = useState(value);
  const [isOpen, setIsOpen] = useState(false);
  const hours = is24Hour ? Array.from({ length: 24 }, (_, i) => i) : Array.from({ length: 12 }, (_, i) => i + 1);
  useEffect(() => {
    setDate(value);
  }, [value]);
  const handleDateSelect = (selectedDate) => {
    setDate(selectedDate);
    onChange?.(selectedDate);
  };
  const handleTimeChange = (type, value2) => {
    const workingDate = date || /* @__PURE__ */ new Date();
    const newDate = new Date(workingDate);
    if (type === "hour") {
      if (is24Hour) {
        newDate.setHours(Number.parseInt(value2));
      } else {
        newDate.setHours(
          Number.parseInt(value2) % 12 + (newDate.getHours() >= 12 ? 12 : 0)
        );
      }
    } else if (type === "minute") {
      newDate.setMinutes(Number.parseInt(value2));
    } else if (type === "ampm") {
      const currentHours = newDate.getHours();
      if (value2 === "PM" && currentHours < 12) {
        newDate.setHours(currentHours + 12);
      } else if (value2 === "AM" && currentHours >= 12) {
        newDate.setHours(currentHours - 12);
      }
    }
    setDate(newDate);
    onChange?.(newDate);
  };
  const getDisplayFormat = () => {
    if (showTime && showDate) {
      return is24Hour ? "MM/dd/yyyy HH:mm" : "MM/dd/yyyy hh:mm aa";
    } else if (showTime && !showDate) {
      return is24Hour ? "HH:mm" : "hh:mm aa";
    } else if (!showTime && showDate) {
      return "PPP";
    }
    return "PPP";
  };
  const getPlaceholder = () => {
    if (placeholder) return placeholder;
    if (showTime && showDate) {
      return is24Hour ? "MM/DD/YYYY HH:mm" : "MM/DD/YYYY hh:mm aa";
    } else if (showTime && !showDate) {
      return is24Hour ? "HH:mm" : "hh:mm aa";
    } else if (!showTime && showDate) {
      return "Pick a date";
    }
    return "Select";
  };
  const datePickerElement = /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
      InputButton,
      {
        id,
        "data-empty": !date,
        "aria-describedby": description ? descriptionId : void 0,
        className: cn(
          "data-[empty=true]:text-subtle w-[280px] justify-start font-normal flex items-center gap-2",
          className
        ),
        isOpen,
        children: [
          /* @__PURE__ */ jsx(StCalendar, { width: 16, height: 16, className: "text-subtle" }),
          date ? format(date, getDisplayFormat()) : /* @__PURE__ */ jsx("span", { children: getPlaceholder() })
        ]
      }
    ) }),
    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
      showDate && /* @__PURE__ */ jsx(
        CalendarPicker,
        {
          mode: "single",
          selected: date,
          onSelect: handleDateSelect
        }
      ),
      !showDate && !showTime && /* @__PURE__ */ jsx(
        CalendarPicker,
        {
          mode: "single",
          selected: date,
          onSelect: handleDateSelect
        }
      ),
      showDate && showTime && /* @__PURE__ */ jsx("div", { className: "flex items-center  h-[365px]", children: /* @__PURE__ */ jsx(
        Separator,
        {
          orientation: "vertical",
          className: "h-full  ",
          decorative: true
        }
      ) }),
      showTime && /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x", children: [
        /* @__PURE__ */ jsx(
          ScrollArea,
          {
            className: cn("w-16", showDate ? "h-[365px]" : "h-[240px]"),
            children: /* @__PURE__ */ jsx("div", { className: "flex flex-col p-2", children: hours.map((hour) => {
              const currentHour = date ? is24Hour ? date.getHours() : date.getHours() % 12 || 12 : null;
              const isSelected = currentHour === hour;
              return /* @__PURE__ */ jsx(
                CalendarButton,
                {
                  size: "sm",
                  variant: isSelected ? "default" : "ghost",
                  className: "w-full shrink-0 aspect-square",
                  onClick: () => handleTimeChange("hour", hour.toString()),
                  children: is24Hour ? hour.toString().padStart(2, "0") : hour
                },
                hour
              );
            }) })
          }
        ),
        /* @__PURE__ */ jsx(
          ScrollArea,
          {
            className: cn("w-16", showDate ? "h-[365px]" : "h-[240px]"),
            children: /* @__PURE__ */ jsx("div", { className: "flex flex-col p-2", children: Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => {
              const currentMinute = date ? Math.floor(date.getMinutes() / 5) * 5 : null;
              const isSelected = currentMinute === minute;
              return /* @__PURE__ */ jsx(
                CalendarButton,
                {
                  size: "sm",
                  variant: isSelected ? "default" : "ghost",
                  className: "w-full shrink-0 aspect-square",
                  onClick: () => handleTimeChange("minute", minute.toString()),
                  children: minute.toString().padStart(2, "0")
                },
                minute
              );
            }) })
          }
        ),
        !is24Hour && /* @__PURE__ */ jsx(
          ScrollArea,
          {
            className: cn("w-16", showDate ? "h-[365px]" : "h-[240px]"),
            children: /* @__PURE__ */ jsx("div", { className: "flex flex-col p-2", children: ["AM", "PM"].map((ampm) => {
              const currentAmPm = date ? date.getHours() >= 12 ? "PM" : "AM" : null;
              const isSelected = currentAmPm === ampm;
              return /* @__PURE__ */ jsx(
                CalendarButton,
                {
                  size: "sm",
                  variant: isSelected ? "default" : "ghost",
                  className: "w-full shrink-0 aspect-square",
                  onClick: () => handleTimeChange("ampm", ampm),
                  children: ampm
                },
                ampm
              );
            }) })
          }
        )
      ] })
    ] }) })
  ] });
  if (!label) {
    return datePickerElement;
  }
  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
    /* @__PURE__ */ jsxs("div", { children: [
      /* @__PURE__ */ jsx("label", { htmlFor: id, className: "block font-medium text-strong", children: label }),
      description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-sm text-subtle", children: description })
    ] }),
    datePickerElement
  ] });
};
DatePicker.displayName = "DatePicker";
export {
  DatePicker
};
