"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _styles = require("./styles");
const CustomTab = ({
  tabName,
  onTabChange
}) => {
  const styles = (0, _styles.useStyles)();
  const [activeTab, setActiveTab] = (0, _react.useState)(1);
  const [indicatorAnim] = (0, _react.useState)(new _reactNative.Animated.Value(0));
  const [tabOneWidth, setTabOneWidth] = (0, _react.useState)(0);
  const [tabTwoWidth, setTabTwoWidth] = (0, _react.useState)(0);
  const [tabThreeWidth, setTabThreeWidth] = (0, _react.useState)(0);
  const handleTabPress = ({
    name,
    tabIndex
  }) => {
    setActiveTab(tabIndex);
    onTabChange && onTabChange(name);
    _reactNative.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(_reactNative.View, {
    style: styles.container
  }, tabName.map((tab, index) => {
    const onLayout = index === 0 ? getLayoutTabOneWidth : index === 1 ? getLayoutTabTwoWidth : getLayoutTabThreeWidth;
    return /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
      key: tab,
      onLayout: onLayout,
      onPress: () => handleTabPress({
        name: tab,
        tabIndex: index + 1
      })
    }, /*#__PURE__*/React.createElement(_reactNative.Text, {
      style: [styles.tabText, activeTab === index + 1 && styles.activeTabText]
    }, tab));
  }), /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
    style: [styles.indicator, getIndicatorPosition(), dynamicWidthStyle]
  }));
};
var _default = exports.default = CustomTab;
//# sourceMappingURL=index.js.map