import { jsx as r, jsxs as t } from "react/jsx-runtime";
import { ChevronDownIcon as u } from "lucide-react";
import { useState as k } from "react";
import { Button as w } from "../atoms/button.js";
import { f as x, C as N } from "../../../calendar-CLEnvrbp.js";
import { Input as b } from "../atoms/input.js";
import { Label as s } from "../atoms/label.js";
import { Popover as D, PopoverTrigger as v, PopoverContent as C } from "../atoms/popover.js";
function P({
  value: e,
  onChange: a,
  className: m,
  ...l
}) {
  const [p, i] = k(!1), d = e ? x(e, "HH:mm:ss") : "";
  return /* @__PURE__ */ r("div", { className: m, children: /* @__PURE__ */ t("div", { className: "flex gap-4", children: [
    /* @__PURE__ */ t("div", { className: "flex flex-col gap-3", children: [
      /* @__PURE__ */ t(s, { className: "px-1", htmlFor: "date-picker", children: [
        "Date:",
        " "
      ] }),
      /* @__PURE__ */ t(D, { onOpenChange: i, open: p, children: [
        /* @__PURE__ */ t(
          v,
          {
            render: /* @__PURE__ */ r(
              w,
              {
                className: "w-32 justify-between font-normal",
                id: "date-picker",
                size: "lg",
                variant: "outline"
              }
            ),
            children: [
              /* @__PURE__ */ r("span", { children: e ? e.toLocaleDateString() : "Select date" }),
              /* @__PURE__ */ r(u, {})
            ]
          }
        ),
        /* @__PURE__ */ r(
          C,
          {
            align: "start",
            className: "w-auto overflow-hidden p-0",
            children: /* @__PURE__ */ r(
              N,
              {
                captionLayout: "dropdown",
                mode: "single",
                onSelect: (o) => {
                  a?.(o), i(!1);
                },
                selected: e,
                ...l
              }
            )
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ t("div", { className: "flex flex-col gap-3", children: [
      /* @__PURE__ */ t(s, { className: "px-1", htmlFor: "time-picker", children: [
        "Time:",
        " "
      ] }),
      /* @__PURE__ */ r(
        b,
        {
          className: "appearance-none bg-background [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none",
          id: "time-picker",
          onChange: (o) => {
            const n = o.target.value;
            if (!(n && e))
              return;
            const [f, h, g] = n.split(":").map(Number), c = new Date(e);
            c.setHours(f, h, g || 0), a?.(c);
          },
          step: "1",
          type: "time",
          value: d
        }
      )
    ] })
  ] }) });
}
P.displayName = "DateTimePicker";
export {
  P as DateTimePicker
};
