// Metro module 9459 (f9460).
import _slicedToArray from "../../_bundle/_slicedToArray";
import { useState, useCallback, useRef, useEffect, useMemo } from "react";
import { TouchableWithoutFeedback, View, FlatList } from "react-native";
import { NOOP } from "../../Constants";
import { createStyles } from "../../design/components/Styles/native/createStyles";
import Module712 from "../../_bundle/Module712";
import { Gesture, GestureDetector } from "../../_bundle/Module5273";
import { intl, t } from "../../intl/index.native";
let useStyles;
let env6238 = {};
const Tab = function Tab(props) {
  let setState;
  const { children, index, isSelected, tabStyle, tabStyleActive, tabStyleSelected, onSelect } = props;
  setState = void 0;
  const styles = useStyles();
  let state;
  [state, setState] = useState(() => false);
  return <TouchableWithoutFeedback accessibilityRole="tab" onPressIn={useCallback(() => setState(true), [setState])} onPressOut={useCallback(() => setState(false), [setState])} onPress={useCallback(() => onSelect(index), [onSelect, index])}>
    <View style={[styles.tab, tabStyle, isSelected ? styles.tabSelected : null, state ? styles.tabActive : null, isSelected ? tabStyleSelected : null, state ? tabStyleActive : null]}>{children}</View>
  </TouchableWithoutFeedback>;
};
useStyles = createStyles({
  innerContainer: {
    flexDirection: "row",
    alignItems: "stretch"
  },
  tab: {
    flexGrow: 1,
    flexBasis: "auto",
    flexShrink: 0,
    alignItems: "center",
    justifyContent: "center",
    marginBottom: 1,
    marginHorizontal: 1,
    padding: 10,
    borderBottomWidth: 2,
    borderBottomColor: "transparent"
  },
  tabActive: {
    backgroundColor: "rgba(0,0,0,0.1)"
  },
  tabSelected: {
    borderBottomColor: Module712.unsafe_rawColors.BRAND_600
  },
  container: {
    flex: 0
  }
});
export default function TabBar(props) {
  let env17234 = {
    $parent: env6238
  };
  const { initialNumTabsToRender, tabs, tabIndexSelected: tabIndexSelected2 } = props;
  env17234[0] = tabIndexSelected2;
  const tabStyle = props.tabStyle;
  env17234[1] = tabStyle;
  const tabStyleActive = props.tabStyleActive;
  env17234[2] = tabStyleActive;
  const tabStyleSelected = props.tabStyleSelected;
  env17234[3] = tabStyleSelected;
  const onSelect2 = props.onSelect;
  env17234[4] = onSelect2;
  const { containerStyle, hideHorizontalScrollbar = false, scrollToSelectedIndex = false } = props;
  let tabIndexSelected, state;
  env17234[5] = scrollToSelectedIndex;
  env17234[6] = void 0;
  env17234[7] = void 0;
  env17234[8] = void 0;
  const styles = useStyles();
  const ref = useRef(null);
  env17234[6] = ref;
  env17234[7] = useRef(tabIndexSelected2);
  useEffect(() => {
    env17234[7].current = env17234[0];
  }, [tabIndexSelected2]);
  const callback = useCallback((a0) => {
    (0, env17234[4])(a0);
    const current = env17234[6].current;
    if (current != null) {
      current.scrollToIndex({
        index: a0
      });
    }
  }, [ref, onSelect2]);
  env17234[8] = callback;
  tabIndexSelected = tabIndexSelected2;
  state = void 0;
  state = _slicedToArray(useState(() => tabIndexSelected), 1)[0];
  useEffect(() => {
    let c30088_0 = setTimeout(() => {
      if (env17234[7].current === state) {
        const current = env17234[6].current;
        if (current != null) {
          current.scrollToIndex({
            index: state,
            viewPosition: 1
          });
        }
      }
    }, 500);
    return () => {
      clearTimeout(c30088_0);
    };
  }, [state]);
  const callback2 = useCallback((a0, a1) => `tab-${a1}`, []);
  const callback3 = useCallback(({ item, index: index2 }) => <Tab index={index2} isSelected={index2 === env17234[0]} tabStyle={env17234[1]} tabStyleActive={env17234[2]} tabStyleSelected={env17234[3]} onSelect={env17234[5] ? env17234[8] : env17234[4]}>{item}</Tab>, [tabIndexSelected, tabStyle, tabStyleActive, tabStyleSelected, scrollToSelectedIndex, onSelect2, callback]);
  const memo = useMemo(() => Gesture.Native().disallowInterruption(true), []);
  return <View style={styles.container} accessibilityRole="tablist" accessibilityLabel={intl.string(t.t1qXlK)}>
    <GestureDetector gesture={memo}>
      <FlatList ref={ref} contentContainerStyle={[containerStyle, styles.innerContainer]} horizontal data={tabs} renderItem={callback3} keyExtractor={callback2} initialNumToRender={initialNumTabsToRender} onScrollToIndexFailed={NOOP} showsHorizontalScrollIndicator={!hideHorizontalScrollbar} />
    </GestureDetector>
  </View>;
};