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";
import { CalendarPicker } from "./CalendarPicker";
import { DatepickerProvider } from "./DatePickerProvider";
import { Dialog } from "./Dialog";
import { Sheet, SheetContent } from "./Sheet";
import { TextField } from "./TextField";
import { getLocaleDate } from "./dateHelper";
import { jsx, jsxs } from "react/jsx-runtime";
function DatePicker({
  value,
  onChange,
  required,
  ...props
}) {
  const [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 });
  }
  const 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: /* @__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: () => {
                  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.js.map
