"use strict";

import { useEffect } from "react";
import { Pressable, StyleSheet, View } from "react-native";
import Animated, { Easing, interpolate, useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
import { useIOTheme } from "../../context";
import { IOSpringValues } from "../../core/IOAnimations";
import { IOColors } from "../../core/IOColors";
import { IOSelectionTickVisualParams } from "../../core/IOStyles";
import { AnimatedTick } from "../common/AnimatedTick";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const styles = StyleSheet.create({
  radioBorder: {
    position: "absolute",
    left: 0,
    top: 0,
    borderWidth: IOSelectionTickVisualParams.borderWidth
  },
  radioCircle: {
    position: "absolute",
    left: 0,
    top: 0
  }
});

/**
 * An animated checkbox. This can be used to implement a
 * standard {@link CheckBox} or other composite components.
 */
export const AnimatedRadio = ({
  size,
  checked,
  onPress,
  disabled
}) => {
  const theme = useIOTheme();
  const isChecked = checked ?? false;
  const borderColor = IOColors[theme["selection-border-off"]];
  const backgroundColor = IOColors[theme["selection-background-on"]];
  const circleAnimationProgress = useSharedValue(checked ? 1 : 0);
  const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
  const radioButtonSizeStyle = {
    width: size,
    height: size,
    borderRadius: size / 2
  };
  const radioButtonWrapperSizeStyle = {
    width: size,
    height: size
  };
  useEffect(() => {
    // eslint-disable-next-line functional/immutable-data
    circleAnimationProgress.value = withSpring(checked ? 1 : 0, IOSpringValues.selection);
    // eslint-disable-next-line functional/immutable-data
    tickAnimationProgress.value = withTiming(checked ? 1 : 0, {
      duration: 400,
      easing: Easing.elastic(1)
    });
  }, [checked, circleAnimationProgress, tickAnimationProgress]);
  const animatedCheckboxSquare = useAnimatedStyle(() => {
    const scale = interpolate(circleAnimationProgress.value, [0, 1], [0.5, 1]);
    const opacity = circleAnimationProgress.value;
    return {
      opacity,
      transform: [{
        scale
      }]
    };
  });
  return /*#__PURE__*/_jsxs(Pressable, {
    accessible: false,
    disabled: disabled,
    testID: "AnimatedRadioInput",
    onPress: onPress,
    style: radioButtonWrapperSizeStyle,
    children: [/*#__PURE__*/_jsx(View, {
      style: [styles.radioBorder, radioButtonSizeStyle, {
        borderColor
      }]
    }), /*#__PURE__*/_jsx(Animated.View, {
      style: [styles.radioCircle, radioButtonSizeStyle, {
        backgroundColor
      }, animatedCheckboxSquare]
    }), isChecked && /*#__PURE__*/_jsx(View, {
      children: /*#__PURE__*/_jsx(AnimatedTick, {
        size: size,
        progress: tickAnimationProgress,
        stroke: IOColors[theme["selection-tick"]]
      })
    })]
  });
};
//# sourceMappingURL=AnimatedRadio.js.map