import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ChevronDown } from "@truststack/icons-ui";
import { useMemo, useState } from "react";
import { Pressable } from "react-native";
import { Adapt, ScrollView, View } from "tamagui";
import { Divider } from "./Divider.native.js";
import { MenuItem } from "./Menu.native.js";
import { Popover } from "./Popover.native.js";
import { Sheet } from "./Sheet.native.js";
import { TextField } from "./TextField.native.js";
import { Body, Headline } from "./typography.native.js";
function Select(param) {
  var {
      options = [],
      label,
      onValueChange = function () {},
      disabled,
      value,
      supportingText,
      loading,
      ...props
    } = param,
    [open, setOpen] = useState(!1),
    [width, setWidth] = useState(0),
    render = useMemo(function () {
      var _options_find;
      return options == null || (_options_find = options.find(function (o) {
        return o.value == value;
      })) === null || _options_find === void 0 ? void 0 : _options_find.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: function (e) {
            return 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, {}), /* @ts-ignore */
          /* @__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(function (o) {
          return /* @__PURE__ */_jsx(Pressable, {
            onPress: function () {
              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.native.js.map
