import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Pressable } from "react-native";
import { ThemeableStack, createStyledContext, styled, withStaticProperties } from "tamagui";
import { Icon as TIcon } from "./Icon.native.js";
import { Label as TLabel } from "./typography.native.js";
var SegmentButtonContext = createStyledContext({
    disabled: !1,
    variant: void 0
  }),
  Frame = styled(ThemeableStack, {
    name: "SegmentButton",
    context: SegmentButtonContext,
    borderRadius: "$shape.corner_full",
    display: "flex",
    flexDirection: "row",
    overflow: "hidden",
    variants: {
      density: {
        0: {
          height: 40,
          maxHeight: 48
        },
        "-1": {
          height: 36,
          maxHeight: 36
        },
        "-2": {
          height: 32,
          maxHeight: 32
        },
        "-3": {
          height: 28,
          maxHeight: 28
        }
      },
      variant: {
        "fill-tonal": {
          backgroundColor: "$secondaryContainer"
        }
      },
      outlined: {
        true: {
          borderWidth: 1,
          borderColor: "$outlineVariant"
        },
        false: {
          borderWidth: 0
        }
      }
    },
    defaultVariants: {
      variant: void 0,
      outlined: !0,
      density: "0"
    }
  }),
  FrameHOC = Frame.styleable(function (param, ref) {
    var {
        children,
        ...props
      } = param,
      items = [],
      childCount = React.Children.count(children);
    return React.Children.forEach(children, function (child, index) {
      var isLast = index + 1 == childCount;
      items.push(/* @__PURE__ */_jsx(ThemeableStack, {
        borderRightWidth: isLast ? 0 : 1,
        borderRightColor: isLast ? void 0 : "$outlineVariant",
        height: "100%",
        f: 1,
        fb: 1,
        justifyContent: "center",
        alignItems: "center",
        display: "flex",
        children: child
      }, `segment-stack-item-${index}`));
    }), /* @__PURE__ */_jsx(Frame, {
      ...props,
      ref,
      children: items
    });
  }),
  SegmentButtonItemContext = createStyledContext({
    selected: !1
  }),
  Item = styled(ThemeableStack, {
    name: "SegmentButtonItem",
    context: SegmentButtonItemContext,
    height: "100%",
    width: "100%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    minWidth: 48,
    cursor: "pointer",
    gap: 8,
    paddingLeft: 12,
    paddingRight: 12,
    variants: {
      variant: {
        "fill-tonal": {
          backgroundColor: "unset"
        }
      },
      selected: {
        true: {
          backgroundColor: "$secondaryContainer"
        },
        false: {
          hoverStyle: {
            backgroundColor: "$surface"
          }
        }
      }
    },
    defaultVariants: {
      selected: !1
    }
  }),
  Label = styled(TLabel, {
    name: "SegmentButtonLabel",
    context: SegmentButtonItemContext,
    size: "large",
    variants: {
      selected: {
        false: {
          col: "$onSurface"
        },
        true: {
          col: "$onSecondaryContainer"
        }
      },
      variant: {
        "filled-tonal": {
          col: "$onSecondaryContainer"
        }
      }
    },
    defaultVariants: {
      selected: !1
    }
  }),
  Icon = styled(TIcon, {
    name: "SegmentButtonIcon",
    context: SegmentButtonItemContext,
    col: "$onSurface",
    size: 18,
    height: 18,
    width: 18,
    variants: {
      disabled: {
        true: {
          col: "$onSurface",
          opacity: 0.38
        }
      },
      variant: {
        "filled-tonal": {
          col: "$onSecondaryContainer"
        }
      }
    }
  }),
  SegmentButtonItem = withStaticProperties(Item, {
    Props: SegmentButtonItemContext.Provider,
    Icon,
    Label,
    Item
  }),
  SegmentButton = withStaticProperties(FrameHOC, {
    Props: SegmentButtonContext.Provider,
    Item: SegmentButtonItem
  });
function SegmentButtonGroup(param) {
  var {
    value,
    items,
    onChange,
    ...props
  } = param;
  return /* @__PURE__ */_jsx(SegmentButton, {
    ...props,
    children: items.map(function (item, index) {
      return /* @__PURE__ */_jsx(Pressable, {
        onPress: function () {
          return onChange(item.value);
        },
        style: {
          width: "100%",
          height: "100%"
        },
        children: /* @__PURE__ */_jsxs(SegmentButton.Item, {
          selected: value == item.value,
          children: [item.Icon && /* @__PURE__ */_jsx(SegmentButton.Item.Icon, {
            Icon: item.Icon
          }), /* @__PURE__ */_jsx(SegmentButton.Item.Label, {
            children: item.label
          })]
        })
      }, `segment-item-${index}`);
    })
  });
}
export { SegmentButton, SegmentButtonGroup };
//# sourceMappingURL=SegmentButton.native.js.map
