import {
  START_DATE,
  useDatepicker
} from "@datepicker-react/hooks";
import { Calendar } from "@truststack/icons-ui";
import { useEffect, useMemo, useState } from "react";
import { KeyboardAvoidingView } from "react-native-web";
import { Adapt, ScrollView, XStack, YStack } from "tamagui";
import { CalendarPicker } from "./CalendarPicker";
import { DatepickerProvider } from "./DatePickerProvider";
import { Dialog } from "./Dialog";
import { Sheet } from "./Sheet";
import { TextField } from "./TextField";
import { TimePicker } from "./TimePicker";
import { getLocaleDateTime, isDateValid } from "./dateHelper";
import { jsx, jsxs } from "react/jsx-runtime";
function DateTimePicker({
  value,
  onChange,
  ...props
}) {
  const [time, setTime] = useState(value), { activeMonths, firstDayOfWeek, ...context } = useDatepicker({
    startDate: value,
    endDate: null,
    focusedInput: START_DATE,
    onDatesChange: handleDateChange,
    numberOfMonths: 1
  });
  function handleDateChange(data) {
    onChange && onChange(data.startDate);
  }
  const inputValue = useMemo(
    () => getLocaleDateTime({ date: new Date(value) }),
    [value]
  );
  return useEffect(() => {
    if (!value || !time) return;
    const year = value.getFullYear(), month = value.getMonth(), day = value.getDate(), hours = time.getHours(), minutes = time.getMinutes(), seconds = time.getSeconds(), milliseconds = time.getMilliseconds(), newDate = new Date(
      year,
      month,
      day,
      hours,
      minutes,
      seconds,
      milliseconds
    );
    newDate.getTime() !== value.getTime() && onChange && onChange(isDateValid(newDate) ? newDate : /* @__PURE__ */ new Date());
  }, [time]), /* @__PURE__ */ jsx(DatepickerProvider, { ...context, children: /* @__PURE__ */ jsxs(Dialog, { modal: !0, children: [
    /* @__PURE__ */ jsx(
      Dialog.Trigger,
      {
        fg: 1,
        disabled: props.disabled,
        padding: 0,
        bc: "transparent",
        bw: 0,
        children: /* @__PURE__ */ jsx(
          TextField,
          {
            ...props,
            pointerEvents: "none",
            cursor: "pointer",
            value: inputValue,
            placeholder: "DD/MM/YYYY",
            trailingIcon: Calendar
          }
        )
      }
    ),
    /* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ jsxs(
      Sheet,
      {
        modal: !0,
        dismissOnSnapToBottom: !0,
        snapPoints: [80],
        moveOnKeyboardChange: !0,
        animation: "quick",
        children: [
          /* @__PURE__ */ jsx(Sheet.Overlay, {}),
          /* @__PURE__ */ jsx(Sheet.Handle, {}),
          /* @__PURE__ */ jsx(Sheet.Frame, { p: 16, pt: 20, children: /* @__PURE__ */ jsx(DatepickerProvider, { ...context, children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }) })
        ]
      }
    ) }),
    /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
      /* @__PURE__ */ jsx(Dialog.Overlay, {}, "date-time-picker-overlay"),
      /* @__PURE__ */ jsx(
        Dialog.Content,
        {
          fullscreen: !1,
          backgroundColor: "$surfaceContainerLowest",
          children: /* @__PURE__ */ jsx(ScrollView, { children: /* @__PURE__ */ jsxs(YStack, { gap: 16, children: [
            /* @__PURE__ */ jsx(
              CalendarPicker,
              {
                col: "$onPrimaryContainer",
                activeMonths,
                firstDayOfWeek
              }
            ),
            /* @__PURE__ */ jsx(XStack, { justifyContent: "center", children: /* @__PURE__ */ jsx(KeyboardAvoidingView, { behavior: "padding", children: /* @__PURE__ */ jsx(
              TimePicker,
              {
                value,
                onChange: (time2) => setTime(new Date(time2 || /* @__PURE__ */ new Date()))
              }
            ) }) })
          ] }) })
        },
        "date-time-picker-content"
      )
    ] }, "date-time-picker-portal")
  ] }) });
}
export {
  DateTimePicker
};
//# sourceMappingURL=DateTimePicker.js.map
