import * as React from "react";
import { Animated, Easing, NativeModules, TouchableHighlight, View } from "react-native";
import { withTheme } from "../../core/theming";
import useAnimatedValue from "../../utils/useAnimatedValue";
const version = NativeModules.PlatformConstants ? NativeModules.PlatformConstants.reactNativeVersion : undefined;
const KNOB_OFFSET = 36;
const Switch = _ref => {
  let {
    value,
    disabled,
    onValueChange,
    color,
    theme,
    ...rest
  } = _ref;
  const xPosiiton = useAnimatedValue(value ? KNOB_OFFSET : 0);
  React.useEffect(() => {
    Animated.timing(xPosiiton, {
      toValue: value ? KNOB_OFFSET : 0,
      easing: Easing.elastic(0.7),
      duration: 100,
      useNativeDriver: true
    }).start();
    return () => {};
  }, [value]);
  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(TouchableHighlight, {
    underlayColor: theme.colors.bg.muted,
    style: {
      width: 64,
      height: 24,
      borderRadius: KNOB_OFFSET,
      padding: 4,
      backgroundColor: theme.colors.bg.muted,
      justifyContent: "center"
    },
    onPress: disabled ? undefined : onValueChange
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: {
      width: 20,
      height: 20,
      borderRadius: 32,
      backgroundColor: "white",
      alignItems: "center",
      justifyContent: "center",
      transform: [{
        translateX: xPosiiton
      }]
    }
  }, /*#__PURE__*/React.createElement(View, {
    style: {
      width: 12,
      height: 12,
      backgroundColor: value ? theme.colors.primary.default : theme.colors.fg.subtle,
      borderRadius: 16
    }
  }))));
};
export default withTheme(Switch);
//# sourceMappingURL=Switch.js.map