import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ChevronDown } from "@truststack/icons-ui";
import { useEffect, useState } from "react";
import { Pressable } from "react-native";
import { Adapt, Text, XStack, styled } from "tamagui";
import { useDatepickerContext } from "./DatePickerProvider.native.js";
import { Dialog } from "./Dialog.native.js";
import { Grid } from "./Grid.native.js";
import { Icon } from "./Icon.native.js";
import { IconButton } from "./IconButton.native.js";
import { Sheet, SheetContent } from "./Sheet.native.js";
import { Body } from "./typography.native.js";
var MONTH = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function MonthPicker(param) {
  var {
      value,
      year,
      ...props
    } = param,
    [open, setOpen] = useState(!1),
    [selectedMonth, setSelectedMonth] = useState(),
    {
      onDateSelect
    } = useDatepickerContext();
  return useEffect(function () {
    selectedMonth && onDateSelect(new Date(year, MONTH.indexOf(selectedMonth)));
  }, [selectedMonth]), /* @__PURE__ */_jsxs(Dialog, {
    allowFlip: !0,
    open,
    onOpenChange: setOpen,
    children: [/* @__PURE__ */_jsx(Pressable, {
      onPress: function () {
        setOpen(!0);
      },
      style: {
        flexGrow: 1
      },
      children: /* @__PURE__ */_jsxs(XStack, {
        gap: 4,
        alignItems: "center",
        justifyContent: "center",
        children: [/* @__PURE__ */_jsx(Icon, {
          size: 14,
          Icon: ChevronDown
        }), /* @__PURE__ */_jsx(Body, {
          textAlign: "center",
          children: value
        })]
      })
    }), /* @__PURE__ */_jsx(Adapt, {
      when: "sm",
      platform: "touch",
      children: /* @__PURE__ */_jsxs(Sheet, {
        modal: !0,
        snapPoints: [40],
        dismissOnSnapToBottom: !0,
        moveOnKeyboardChange: !0,
        children: [/* @__PURE__ */_jsx(Sheet.Overlay, {}), /* @__PURE__ */_jsx(Sheet.Handle, {}), /* @__PURE__ */_jsx(Sheet.Frame, {
          children: /* @__PURE__ */_jsx(SheetContent, {
            children: /* @__PURE__ */_jsx(Adapt.Contents, {})
          })
        })]
      })
    }), /* @__PURE__ */_jsxs(Dialog.Portal, {
      children: [/* @__PURE__ */_jsx(Dialog.Overlay, {}, "month-picker-overlay"), /* @__PURE__ */_jsx(Dialog.Content, {
        width: 360,
        marginTop: 12,
        backgroundColor: "$surfaceContainerHigh",
        borderRadius: "$shape.corner_l",
        padding: "$spacing.margin_compact",
        borderColor: "$color.outline",
        borderWidth: "$border.outline",
        children: /* @__PURE__ */_jsx(Grid, {
          width: "100%",
          children: MONTH.map(function (month, index) {
            return /* @__PURE__ */_jsx(Grid.Item, {
              compact: 4,
              exp: 4,
              children: /* @__PURE__ */_jsx(MonthButton, {
                onPress: function () {
                  setOpen(!1), setSelectedMonth(month);
                },
                hoverStyle: {
                  col: "$onSurfaceVariant"
                },
                col: "$onSurface",
                selected: month == value,
                ...props,
                children: /* @__PURE__ */_jsx(MonthText, {
                  children: month
                })
              })
            }, `month-${index}`);
          })
        })
      }, "month-picker-content")]
    }, "month-picker-portal")]
  });
}
var MonthButton = styled(IconButton, {
    name: "MonthButton",
    bc: "transparent",
    m: 4,
    mb: 4,
    w: 100,
    hoverStyle: {
      col: "$onSurfaceVariant"
    },
    variants: {
      selected: {
        true: {
          backgroundColor: "$outlineVariant"
        }
      }
    }
  }),
  MonthText = styled(Text, {
    name: "MonthText",
    bc: "transparent",
    variants: {
      selected: {
        true: {
          color: "$onTertiary"
        }
      }
    }
  });
export { MONTH, MonthPicker };
//# sourceMappingURL=MonthPicker.native.js.map
