"use strict";

import { cloneElement, useState } from "react";
import { StyleSheet, View } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { IOVisualCostants } from "../../core";
import { jsx as _jsx } from "react/jsx-runtime";
const itemsJustify = {
  start: "flex-start",
  center: "center",
  end: "flex-end",
  stretch: "space-between"
};
const TabNavigation = ({
  color = "light",
  selectedIndex,
  tabAlignment = "center",
  onItemPress,
  children,
  includeContentMargins = true
}) => {
  const [itemMinWidth, setItemMinWidth] = useState(0);
  const handleItemOnLayout = event => {
    const {
      width
    } = event.nativeEvent.layout;
    setItemMinWidth(current => Math.max(current, width));
  };
  const stretchItems = tabAlignment === "stretch";
  const wrapChild = (child, index = 0) => /*#__PURE__*/_jsx(View, {
    style: [styles.item, stretchItems && {
      minWidth: itemMinWidth
    }],
    onLayout: handleItemOnLayout,
    children: /*#__PURE__*/cloneElement(child, {
      onPress: event => {
        child.props.onPress?.(event);
        onItemPress?.(index);
      },
      selected: selectedIndex === index,
      color
    })
  }, child.props.label);
  return /*#__PURE__*/_jsx(ScrollView, {
    horizontal: true,
    centerContent: true,
    showsHorizontalScrollIndicator: false,
    contentContainerStyle: [includeContentMargins ? {
      paddingHorizontal: IOVisualCostants.appMarginDefault
    } : {}, {
      flexGrow: 1,
      justifyContent: itemsJustify[tabAlignment],
      gap: 8
    }],
    children: Array.isArray(children) ? children.map(wrapChild) : wrapChild(children)
  });
};
const styles = StyleSheet.create({
  item: {
    flexGrow: 0,
    flexShrink: 1,
    flexBasis: 100,
    alignItems: "center"
  }
});
export { TabNavigation };
//# sourceMappingURL=TabNavigation.js.map