import { useEffect, useState } from "react";
import { Pressable } from "react-native-web";
import { AnimatePresence, View, XStack, YStack, createStyledContext, styled, withStaticProperties } from "tamagui";
import { Title } from "./typography.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
const Container = styled(XStack, {
  name: "TabsContainer",
  backgroundColor: "$surface",
  height: 48,
  width: "100%",
  variants: {
    outlined: {
      true: {
        borderBottomWidth: "$border.outline",
        borderBottomColor: "$outlineVariant"
      },
      false: {}
    }
  },
  defaultVariants: {
    outlined: !1
  }
});
function TabItem({
  label,
  active = !1
}) {
  return /* @__PURE__ */jsx(Tab, {
    active,
    children: /* @__PURE__ */jsx(Tab.Label, {
      children: label
    })
  });
}
const ItemContext = createStyledContext({
    active: !1
  }),
  Item = styled(YStack, {
    name: "TabItem",
    context: ItemContext,
    alignContent: "center",
    justifyContent: "center",
    fg: 1,
    flexBasis: 1,
    cursor: "pointer",
    paddingLeft: 12,
    paddingRight: 12,
    borderRadius: "$shape.corner_m",
    minWidth: 88,
    variants: {
      active: {
        true: {
          hoverStyle: {
            backgroundColor: "$primaryContainer"
          }
        },
        false: {
          hoverStyle: {
            backgroundColor: "$onSurfaceOpacity"
          }
        }
      }
    }
  }),
  Label = styled(Title, {
    name: "TabLabel",
    context: ItemContext,
    textAlign: "center",
    size: "small",
    col: "$onPrimaryContainer",
    variants: {
      active: {
        true: {
          col: "$primary"
        }
      }
    }
  }),
  Tab = withStaticProperties(Item, {
    Props: ItemContext.Provider,
    Label
  }),
  TabsContainer = withStaticProperties(Container, {});
function Tabs({
  value,
  onChange,
  items,
  shiftLeft,
  ...props
}) {
  return /* @__PURE__ */jsx(TabsContainer, {
    ...props,
    children: /* @__PURE__ */jsx(AnimatePresence, {
      children: items?.map((item, index) => /* @__PURE__ */jsxs(Pressable, {
        onPress: () => onChange(item.value),
        style: {
          flexBasis: shiftLeft ? void 0 : 1,
          flexGrow: shiftLeft ? void 0 : 1,
          position: "relative",
          flexDirection: "column",
          alignItems: "center",
          alignContent: "center"
        },
        children: [/* @__PURE__ */jsx(TabItem, {
          active: item.value == value,
          label: item.label
        }), item.value == value && /* @__PURE__ */jsx(ActiveIndicator, {}, `indicator-${value}`)]
      }, `tab-item-${item.value}`))
    })
  });
}
function TabsContent({
  value,
  items,
  ...props
}) {
  const [renderTab, setRenderTab] = useState(value);
  return useEffect(() => {
    setRenderTab(void 0), setTimeout(() => setRenderTab(value), 400);
  }, [value]), /* @__PURE__ */jsx(AnimatePresence, {
    children: items?.map((tab, index) => renderTab == tab.value && /* @__PURE__ */jsx(TabContent, {
      ...props,
      children: tab.content instanceof Function ? tab.content() : tab.content
    }, `tab-content-${index}`))
  });
}
const TabContent = styled(View, {
    name: "TabContent",
    animation: "lazy",
    enterStyle: {
      opacity: 0
    },
    exitStyle: {
      opacity: 0
    }
  }),
  ActiveIndicator = styled(View, {
    name: "ActiveIndicator",
    backgroundColor: "$primary",
    position: "absolute",
    height: 3,
    maxWidth: 48,
    width: "100%",
    borderTopRightRadius: 3,
    borderTopLeftRadius: 3,
    animation: "300ms",
    animateOnly: ["opacity", "scale"],
    bottom: 0,
    exitStyle: {
      opacity: 0,
      scale: 1
    },
    enterStyle: {
      opacity: 0,
      scale: 0
    }
  });
export { TabItem, Tabs, TabsContainer, TabsContent };
//# sourceMappingURL=Tabs.mjs.map
