"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _Text = _interopRequireDefault(require("../Typography/Text"));
var _TouchableRipple = _interopRequireDefault(require("../TouchableRipple/TouchableRipple.native"));
var _theming = require("../../core/theming");
var _maskedView = _interopRequireDefault(require("@react-native-masked-view/masked-view"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const SegmentedController = _ref => {
  let {
    mode = 'default',
    segments,
    theme,
    style,
    ...rest
  } = _ref;
  const [prevSelectedIndex, setPrevSelectedIndex] = React.useState(0);
  const [selectedIndex, setSelectedIndex] = React.useState(0);
  const selectedPanelLeft = React.useRef(new _reactNative.Animated.Value(0));
  const widthSize = 100 / segments.length;
  const interpolatedValuesInput = segments.map((_, i) => {
    return widthSize * i;
  });
  const interpolatedValuesOutput = segments.map((_, i) => {
    return `${widthSize * i}%`;
  });
  React.useEffect(() => {
    const left = widthSize * selectedIndex;
    _reactNative.Animated.timing(selectedPanelLeft.current, {
      toValue: left,
      duration: 300,
      useNativeDriver: false
    }).start(() => {
      //reset index after animation is done
      setPrevSelectedIndex(selectedIndex);
    });
  }, [widthSize, selectedPanelLeft, selectedIndex]);
  const maxIndex = selectedIndex > prevSelectedIndex ? selectedIndex : prevSelectedIndex;
  const minIndex = selectedIndex > prevSelectedIndex ? prevSelectedIndex : selectedIndex;
  const highlightMask = {
    backgroundColor: mode === 'default' ? theme.colors.bg.surface : 'transparent'
  };
  const highlightText = {
    color: theme.colors.fg.default
  };
  const inactiveText = {
    color: theme.colors.fg.disabled
  };
  const inactiveBackground = {
    backgroundColor: theme.dark ? mode === 'line' ? theme.colors.bg.surface : theme.colors.bg.subtle : 'transparent'
  };

  /**
   * For whatever reason, the `zIndex: -1` on Text works on Android, but does not work
   * on iOS. However, when we can get away with only removing the Text from zIndex,
   * the ripple effect continues to work on Android. As such, we conditionally
   * apply the logic for Android vs iOS
   */
  const inactiveContainerIOS = _reactNative.Platform.OS === 'ios' ? {
    zIndex: -1
  } : {};
  return /*#__PURE__*/React.createElement(_reactNative.View, {
    style: [styles.container, mode === 'line' && {
      ...styles.lineContainer,
      borderBottomColor: theme.colors.fg.subtle
    }, mode === 'default' && {
      backgroundColor: theme.colors.bg.canvas
    }, style],
    accessible: true,
    accessibilityRole: "radiogroup"
  }, /*#__PURE__*/React.createElement(_maskedView.default, {
    importantForAccessibility: 'no-hide-descendants',
    accessibilityElementsHidden: true,
    key: selectedIndex,
    style: styles.maskViewContainer,
    androidRenderingMode: 'software',
    maskElement: /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
      style: [styles.maskContainer, {
        width: `${widthSize}%`,
        left: selectedPanelLeft.current.interpolate({
          inputRange: interpolatedValuesInput,
          outputRange: interpolatedValuesOutput
        })
      }, mode === 'line' && {
        borderRadius: 0
      }]
    })
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: [styles.baseButtonContainer, highlightMask, mode === 'line' && styles.lineBaseButtonContainer, mode === 'line' && {
      borderBottomColor: theme.colors.fg.default
    }]
  }, segments.map((segment, i) => /*#__PURE__*/React.createElement(_TouchableRipple.default, {
    key: i,
    onPress: () => {
      setPrevSelectedIndex(selectedIndex);
      setSelectedIndex(i);
      if (typeof segment.onPress === 'function') segment.onPress();
    },
    style: styles.baseTouchableRipple
  }, /*#__PURE__*/React.createElement(_Text.default, {
    style: [styles.baseButtonText, styles.highlightText, highlightText],
    numberOfLines: 1
  }, segment.label))))), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: [styles.baseButtonContainer, styles.inactiveButtonContainer, inactiveContainerIOS, mode === 'line' && {
      paddingBottom: 1,
      left: 0
    }]
  }, segments.map((segment, i) => /*#__PURE__*/React.createElement(_TouchableRipple.default, {
    accessibilityRole: "radio",
    accessibilityState: {
      checked: selectedIndex === i
    },
    accessibilityLiveRegion: "polite",
    key: i,
    style: [styles.baseTouchableRipple, {
      zIndex: minIndex <= i && maxIndex >= i ? -1 : 0
    }, inactiveBackground],
    onPress: () => {
      setPrevSelectedIndex(selectedIndex);
      setSelectedIndex(i);
      if (typeof segment.onPress === 'function') segment.onPress();
    }
  }, /*#__PURE__*/React.createElement(_Text.default, {
    style: [styles.baseButtonText, inactiveText],
    numberOfLines: 1
  }, segment.label)))));
};
const styles = _reactNative.StyleSheet.create({
  container: {
    height: 48,
    position: 'relative',
    padding: 4,
    borderRadius: 12
  },
  lineContainer: {
    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth * 2,
    padding: 0,
    paddingTop: 4,
    marginHorizontal: 4,
    borderRadius: 0
  },
  maskViewContainer: {
    width: '100%',
    height: '100%',
    position: 'relative'
  },
  maskContainer: {
    position: 'absolute',
    backgroundColor: 'black',
    borderRadius: 10,
    height: '100%',
    left: 0,
    top: 0
  },
  baseButtonContainer: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'nowrap',
    justifyContent: 'space-around',
    alignItems: 'center'
  },
  lineBaseButtonContainer: {
    borderBottomWidth: 1
  },
  inactiveButtonContainer: {
    position: 'absolute',
    top: 4,
    left: 4,
    width: '100%',
    height: '100%'
  },
  baseTouchableRipple: {
    height: '100%',
    flex: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  },
  baseButtonText: {
    paddingHorizontal: 16
  },
  highlightText: {
    zIndex: 1
  }
});
var _default = (0, _theming.withTheme)(SegmentedController);
exports.default = _default;
//# sourceMappingURL=SegmentedController.js.map