import { ChevronDown } from "@truststack/icons-ui";
import { useMemo, useState } from "react";
import { Pressable } from "react-native-web";
import { Adapt, ScrollView, View } from "tamagui";
import { Divider } from "./Divider.mjs";
import { MenuItem } from "./Menu.mjs";
import { Popover } from "./Popover.mjs";
import { Sheet } from "./Sheet.mjs";
import { TextField } from "./TextField.mjs";
import { Body, Headline } from "./typography.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
function Select({
  options = [],
  label,
  onValueChange = () => {},
  disabled,
  value,
  supportingText,
  loading,
  ...props
}) {
  const [open, setOpen] = useState(!1),
    [width, setWidth] = useState(0),
    render = useMemo(() => options?.find(o => o.value == value)?.label, [value, options]);
  return /* @__PURE__ */jsxs(Popover, {
    allowFlip: !0,
    open,
    onOpenChange: setOpen,
    children: [/* @__PURE__ */jsx(Popover.Trigger, {
      disabled,
      f: 1,
      cursor: "pointer",
      asChild: !0,
      children: /* @__PURE__ */jsx(Pressable, {
        disabled,
        style: {
          flexGrow: 1
        },
        children: /* @__PURE__ */jsx(TextField, {
          disabled,
          label,
          loading,
          supportingText,
          trailingIcon: ChevronDown,
          onLayout: e => setWidth(e.nativeEvent.layout.width),
          ...props,
          pointerEvents: "none",
          cursor: "pointer",
          value: render || ""
        })
      })
    }), /* @__PURE__ */jsx(Adapt, {
      when: "sm",
      children: /* @__PURE__ */jsxs(Sheet, {
        modal: !0,
        snapPoints: [80],
        animation: "quick",
        disableDrag: !0,
        children: [/* @__PURE__ */jsx(Sheet.Overlay, {}), /* @__PURE__ */jsxs(Sheet.Frame, {
          pb: 16,
          backgroundColor: "$surfaceContainerLowest",
          children: [/* @__PURE__ */jsx(View, {
            margin: "$spacing.margin_compact",
            children: /* @__PURE__ */jsx(Headline, {
              children: label
            })
          }), /* @__PURE__ */jsx(Divider, {}), /* @__PURE__ */jsx(Adapt.Contents, {
            background: "$transparent"
          })]
        })]
      })
    }), /* @__PURE__ */jsx(Popover.Content, {
      minWidth: 0,
      maxWidth: void 0,
      open,
      onOpenChange: setOpen,
      p: 0,
      backgroundColor: "$surfaceContainerLowest",
      width,
      maxHeight: 300,
      overflow: "hidden",
      borderRadius: "$shape.corner_l",
      borderWidth: "$border.outline",
      borderColor: "$outline",
      children: /* @__PURE__ */jsxs(ScrollView, {
        width: "100%",
        showsVerticalScrollIndicator: !1,
        children: [!options?.length && /* @__PURE__ */jsx(Body, {
          m: 12,
          children: "No options"
        }), options?.map(o => /* @__PURE__ */jsx(Pressable, {
          onPress: () => {
            setOpen(!1), onValueChange(o.value);
          },
          style: {
            width: "100%",
            justifyContent: "flex-start",
            flexDirection: "row",
            display: "flex"
          },
          children: /* @__PURE__ */jsxs(MenuItem, {
            selected: value == o.value,
            children: [/* @__PURE__ */jsx(MenuItem.Label, {
              children: o.label
            }), /* @__PURE__ */jsx(MenuItem.Selected, {})]
          })
        }, `menu-item-${o.value}`))]
      })
    })]
  });
}
export { Select };
//# sourceMappingURL=Select.mjs.map
