import { jsxs as p, jsx as a } from "react/jsx-runtime";
import { s as P, a as R, b as $ } from "../lite.js";
import { useState as g, useMemo as B, useCallback as O, useEffect as L } from "react";
import { c as V } from "../tools/icons.js";
import { c as _, s as q, a as z, l as A } from "../tools/tools.js";
const F = [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()], r = (h) => h.toString().padStart(2, "0"), G = function(x) {
  const {
    as: M = "div",
    className: f,
    dropOldClass: y,
    onDateClick: c,
    selectedDate: u,
    style: C,
    variables: D,
    ...k
  } = x, n = u && u.length > 0 ? u : F, [l, N] = g(n.map((e) => r(e.getHours()))), [i, S] = g(n.map((e) => r(e.getMinutes()))), [m, b] = g(n.map((e) => r(e.getSeconds()))), H = B(() => {
    const e = _(!y && "card card-body border-0 p-0", f), s = q((t, o) => ({ tKey: z(o) }), D, C);
    return {
      className: e,
      style: s
    };
  }, [f, y, C, D]), v = O(() => {
    const e = (t, o) => {
      const T = parseInt(l[o], 10) || 0, j = parseInt(i[o], 10) || 0, E = parseInt(m[o], 10) || 0;
      return P(R($(t, T), j), E);
    }, s = n.map((t, o) => e(t, o));
    c == null || c({ date: A(s[0], s[1]) });
  }, [n, l, i, c, m]), w = (e, s) => {
    const t = [...l];
    t[s] = e.target.value.trim(), N(t);
  }, I = (e, s) => {
    const t = [...i];
    t[s] = e.target.value.trim(), S(t);
  }, K = (e, s) => {
    const t = [...m];
    t[s] = e.target.value.trim(), b(t);
  }, d = (e) => {
    e.key === "Enter" && v();
  };
  return L(() => {
    N(n.map((e) => r(e.getHours()))), S(n.map((e) => r(e.getMinutes()))), b(n.map((e) => r(e.getSeconds())));
  }, [n]), /* @__PURE__ */ p(M, { ...k, ...H, children: [
    /* @__PURE__ */ a("div", { className: "d-flex flex-column gap-2", children: ["Start", "End"].map((e, s) => /* @__PURE__ */ p("div", { className: "input-group", children: [
      /* @__PURE__ */ p("span", { className: "input-group-text text-primary-emphasis", children: [
        e,
        "Time"
      ] }),
      /* @__PURE__ */ a(
        "input",
        {
          className: "form-control",
          onChange: (t) => w(t, s),
          onKeyDown: d,
          placeholder: "HH",
          type: "text",
          value: l[s]
        }
      ),
      /* @__PURE__ */ a("span", { className: "input-group-text text-secondary", children: ":" }),
      /* @__PURE__ */ a(
        "input",
        {
          className: "form-control",
          onChange: (t) => I(t, s),
          onKeyDown: d,
          placeholder: "MM",
          type: "text",
          value: i[s]
        }
      ),
      /* @__PURE__ */ a("span", { className: "input-group-text text-secondary", children: ":" }),
      /* @__PURE__ */ a(
        "input",
        {
          className: "form-control",
          onChange: (t) => K(t, s),
          onKeyDown: d,
          placeholder: "SS",
          type: "text",
          value: m[s]
        }
      )
    ] }, s)) }),
    /* @__PURE__ */ p(
      "button",
      {
        className: "btn btn-outline-primary btn-sm mt-4 mb-1 d-flex justify-content-center align-items-center gap-1",
        onClick: v,
        type: "button",
        children: [
          /* @__PURE__ */ a("span", { className: "d-inline-flex", children: /* @__PURE__ */ a(V, {}) }),
          /* @__PURE__ */ a("span", { children: "Confirm" })
        ]
      }
    )
  ] });
};
G.displayName = "BRL.DateRangePickerTime";
export {
  G as D
};
//# sourceMappingURL=date-range-picker-time.js.map
