import { START_DATE, useDatepicker } from "@datepicker-react/hooks";
import { Calendar } from "@truststack/icons-ui";
import { useEffect, useState } from "react";
import { Adapt } from "tamagui";
import { CalendarPicker } from "./CalendarPicker.mjs";
import { DatepickerProvider } from "./DatePickerProvider.mjs";
import { Dialog } from "./Dialog.mjs";
import { Sheet, SheetContent } from "./Sheet.mjs";
import { TextField } from "./TextField.mjs";
import { getLocaleDate } from "./dateHelper.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
function DateRangePicker({
  startDate,
  endDate,
  onChange,
  ...props
}) {
  const [state, setState] = useState({
      startDate,
      endDate,
      focusedInput: START_DATE
    }),
    {
      activeMonths,
      firstDayOfWeek,
      ...context
    } = useDatepicker({
      startDate: state.startDate,
      endDate: state.endDate,
      focusedInput: state.focusedInput,
      onDatesChange: handleDateChange,
      numberOfMonths: 1
    });
  function handleDateChange(data) {
    data.focusedInput ? setState(data) : setState({
      ...data,
      focusedInput: START_DATE
    }), typeof onChange == "function" && onChange(data);
  }
  const getInputValue = () => !state.startDate && !state.endDate ? "" : state.startDate && !state.endDate ? getLocaleDate({
    date: state.startDate
  }) : `${getLocaleDate({
    date: state.startDate
  })}${state.endDate ? " - " + getLocaleDate({
    date: state.endDate
  }) : ""}`;
  return useEffect(() => {
    setState({
      ...state,
      startDate,
      endDate
    });
  }, [startDate, endDate]), /* @__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: getInputValue(),
          trailingIcon: Calendar
        })
      }), /* @__PURE__ */jsx(Adapt, {
        when: "sm",
        platform: "touch",
        children: /* @__PURE__ */jsxs(Sheet, {
          modal: !0,
          snapPoints: [80],
          animation: "quick",
          children: [/* @__PURE__ */jsx(Sheet.Overlay, {}), /* @__PURE__ */jsx(Sheet.Handle, {}), /* @__PURE__ */jsx(Sheet.Frame, {
            children: /* @__PURE__ */jsx(SheetContent, {
              margin: "$spacing.compact_margin",
              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(CalendarPicker, {
            activeMonths,
            firstDayOfWeek
          })
        }, "date-time-picker-content")]
      }, "date-time-picker-portal")]
    })
  });
}
export { DateRangePicker };
//# sourceMappingURL=DateRangePicker.mjs.map
