import { ChevronDown } from "@truststack/icons-ui";
import { useEffect, useState } from "react";
import { Pressable } from "react-native-web";
import { Adapt, Text, XStack, styled } from "tamagui";
import { useDatepickerContext } from "./DatePickerProvider.mjs";
import { Dialog } from "./Dialog.mjs";
import { Grid } from "./Grid.mjs";
import { Icon } from "./Icon.mjs";
import { IconButton } from "./IconButton.mjs";
import { Sheet, SheetContent } from "./Sheet.mjs";
import { Body } from "./typography.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
const MONTH = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function MonthPicker({
  value,
  year,
  ...props
}) {
  const [open, setOpen] = useState(!1),
    [selectedMonth, setSelectedMonth] = useState(),
    {
      onDateSelect
    } = useDatepickerContext();
  return useEffect(() => {
    selectedMonth && onDateSelect(new Date(year, MONTH.indexOf(selectedMonth)));
  }, [selectedMonth]), /* @__PURE__ */jsxs(Dialog, {
    allowFlip: !0,
    open,
    onOpenChange: setOpen,
    children: [/* @__PURE__ */jsx(Pressable, {
      onPress: () => {
        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((month, index) => /* @__PURE__ */jsx(Grid.Item, {
            compact: 4,
            exp: 4,
            children: /* @__PURE__ */jsx(MonthButton, {
              onPress: () => {
                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")]
  });
}
const 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.mjs.map
