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 { useState } from "react";
import { Adapt, View } from "tamagui";
import { Button } from "./Button.native.js";
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 DatePicker(param) {
  var {
      value,
      onChange,
      required,
      ...props
    } = param,
    [open, setOpen] = useState(!1),
    [state, setState] = useState({
      startDate: value,
      endDate: null,
      focusedInput: START_DATE
    }),
    {
      activeMonths,
      firstDayOfWeek,
      ...context
    } = useDatepicker({
      startDate: state.startDate,
      endDate: null,
      focusedInput: state.focusedInput,
      onDatesChange: handleDateChange,
      numberOfMonths: 1
    });
  function handleDateChange(data) {
    setState({
      ...data,
      focusedInput: START_DATE
    });
  }
  var inputValue = getLocaleDate({
      date: value
    }),
    selectedDate = getLocaleDate({
      date: state.startDate
    }),
    label = required ? `${props.label} *` : props.label;
  return /* @__PURE__ */_jsx(DatepickerProvider, {
    ...context,
    children: /* @__PURE__ */_jsxs(Dialog, {
      modal: !0,
      open,
      onOpenChange: setOpen,
      children: [/* @__PURE__ */_jsx(Dialog.Trigger, {
        fg: 1,
        disabled: props.disabled,
        padding: 0,
        bc: "transparent",
        bw: 0,
        children: /* @__PURE__ */_jsx(TextField, {
          ...props,
          label,
          pointerEvents: "none",
          placeholder: "DD/MM/YYYY",
          cursor: "pointer",
          value: inputValue || void 0,
          trailingIcon: Calendar,
          focusable: !0
        })
      }), /* @__PURE__ */_jsx(Adapt, {
        when: "sm",
        platform: "touch",
        children: /* @__PURE__ */_jsxs(Sheet, {
          modal: !0,
          snapPoints: [80],
          animation: "quick",
          dismissOnOverlayPress: !0,
          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__ */_jsxs(Dialog.Content, {
          fullscreen: !1,
          backgroundColor: "$surfaceContainerLowest",
          children: [/* @__PURE__ */_jsx(CalendarPicker, {
            activeMonths,
            firstDayOfWeek
          }), /* @__PURE__ */_jsx(View, {
            marginTop: 12,
            justifyContent: "flex-end",
            flexDirection: "row",
            children: /* @__PURE__ */_jsxs(Button, {
              disabled: !state.startDate,
              onPress: function () {
                onChange(state.startDate), setOpen(!1);
              },
              children: [/* @__PURE__ */_jsx(Button.Icon, {
                Icon: Calendar
              }), /* @__PURE__ */_jsx(Button.Text, {
                children: selectedDate ? `Confirm: ${selectedDate}` : "Select a date"
              })]
            })
          })]
        }, "date-time-picker-content")]
      }, "date-time-picker-portal")]
    })
  });
}
export { DatePicker };
//# sourceMappingURL=DatePicker.native.js.map
