import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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.native.js";
import { DatepickerProvider } from "./DatePickerProvider.native.js";
import { Dialog } from "./Dialog.native.js";
import { Sheet, SheetContent } from "./Sheet.native.js";
import { TextField } from "./TextField.native.js";
import { getLocaleDate } from "./dateHelper.native.js";
function DateRangePicker(param) {
  var {
      startDate,
      endDate,
      onChange,
      ...props
    } = param,
    [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);
  }
  var getInputValue = function () {
    return !state.startDate && !state.endDate ? "" : state.startDate && !state.endDate ? getLocaleDate({
      date: state.startDate
    }) : `${getLocaleDate({
      date: state.startDate
    })}${state.endDate ? " - " + getLocaleDate({
      date: state.endDate
    }) : ""}`;
  };
  return useEffect(function () {
    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(),
          // placeholder="DD/MM/YYYY"
          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: (/* We need to repropagate the context for this to work on Android */
              /* @__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.native.js.map
