"use strict";

import { useEffect } from "react";
import { Pressable, StyleSheet } 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 { IOVisualCostants } from "../../core/IOStyles";
import { AnimatedTick } from "../common/AnimatedTick";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const internalSpacing = 4;
const styles = StyleSheet.create({
  checkBoxWrapper: {
    width: IOVisualCostants.avatarSizeSmall,
    height: IOVisualCostants.avatarSizeSmall,
    padding: internalSpacing
  },
  checkBoxShape: {
    position: "absolute",
    left: 0,
    top: 0,
    width: IOVisualCostants.avatarSizeSmall,
    height: IOVisualCostants.avatarSizeSmall,
    borderRadius: IOVisualCostants.avatarRadiusSizeSmall,
    borderCurve: "continuous"
  }
});

/**
 * Animated message checkbox used for the specific message
 * list item (Select mode that enables related actions)
 */
export const AnimatedMessageCheckbox = ({
  accessible,
  checked,
  onPress
}) => {
  const theme = useIOTheme();
  const isChecked = !!checked;
  const shapeAnimationProgress = useSharedValue(checked ? 1 : 0);
  const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
  const backgroundColor = IOColors[theme["selection-background-on"]];
  useEffect(() => {
    // eslint-disable-next-line functional/immutable-data
    shapeAnimationProgress.value = withSpring(checked ? 1 : 0, IOSpringValues.selection);
    // eslint-disable-next-line functional/immutable-data
    tickAnimationProgress.value = withTiming(checked ? 1 : 0, {
      duration: 250,
      easing: Easing.out(Easing.cubic)
    });
  }, [checked, shapeAnimationProgress, tickAnimationProgress]);
  const animatedCheckboxShape = useAnimatedStyle(() => {
    const scale = interpolate(shapeAnimationProgress.value, [0, 1], [0.8, 1]);
    const opacity = shapeAnimationProgress.value;
    return {
      opacity,
      transform: [{
        scale
      }]
    };
  });
  return /*#__PURE__*/_jsxs(Pressable, {
    accessible: accessible,
    accessibilityRole: "checkbox",
    accessibilityState: {
      checked
    },
    testID: "AnimatedMessageCheckboxInput",
    onPress: onPress,
    style: styles.checkBoxWrapper,
    children: [/*#__PURE__*/_jsx(Animated.View, {
      style: [styles.checkBoxShape, {
        backgroundColor
      }, animatedCheckboxShape]
    }), isChecked && /*#__PURE__*/_jsx(AnimatedTick, {
      progress: tickAnimationProgress,
      strokeWidth: 1.5,
      stroke: IOColors[theme["selection-tick"]]
    })]
  });
};
//# sourceMappingURL=AnimatedMessageCheckbox.js.map