import { useState } from 'react';
import { Animated, Text, TouchableOpacity, View } from 'react-native';
import { useStyles } from './styles';
const CustomTab = ({
  tabName,
  onTabChange
}) => {
  const styles = useStyles();
  const [activeTab, setActiveTab] = useState(1);
  const [indicatorAnim] = useState(new Animated.Value(0));
  const [tabOneWidth, setTabOneWidth] = useState(0);
  const [tabTwoWidth, setTabTwoWidth] = useState(0);
  const [tabThreeWidth, setTabThreeWidth] = useState(0);
  const handleTabPress = ({
    name,
    tabIndex
  }) => {
    setActiveTab(tabIndex);
    onTabChange && onTabChange(name);
    Animated.timing(indicatorAnim, {
      toValue: tabIndex,
      duration: 100,
      useNativeDriver: true
    }).start();
  };
  const getIndicatorPosition = () => {
    const tabWidth = tabOneWidth;
    const translateX = indicatorAnim.interpolate({
      inputRange: [0, 1, 2, 3],
      outputRange: [8, 12, tabWidth + 12, tabOneWidth + tabTwoWidth + 12]
    });
    return {
      transform: [{
        translateX
      }]
    };
  };
  const getLayoutTabOneWidth = event => {
    var {
      width
    } = event.nativeEvent.layout;
    setTabOneWidth(width);
  };
  const getLayoutTabTwoWidth = event => {
    var {
      width
    } = event.nativeEvent.layout;
    setTabTwoWidth(width);
  };
  const getLayoutTabThreeWidth = event => {
    var {
      width
    } = event.nativeEvent.layout;
    setTabThreeWidth(width);
  };
  const dynamicWidthStyle = {
    width: activeTab === 1 ? tabOneWidth - 20 : activeTab === 2 ? tabTwoWidth - 20 : activeTab === 3 ? tabThreeWidth - 20 : undefined
  };
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, tabName.map((tab, index) => {
    const onLayout = index === 0 ? getLayoutTabOneWidth : index === 1 ? getLayoutTabTwoWidth : getLayoutTabThreeWidth;
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      key: tab,
      onLayout: onLayout,
      onPress: () => handleTabPress({
        name: tab,
        tabIndex: index + 1
      })
    }, /*#__PURE__*/React.createElement(Text, {
      style: [styles.tabText, activeTab === index + 1 && styles.activeTabText]
    }, tab));
  }), /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.indicator, getIndicatorPosition(), dynamicWidthStyle]
  }));
};
export default CustomTab;
//# sourceMappingURL=index.js.map