"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AnimatedMessageCheckbox = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _context = require("../../context");
var _IOAnimations = require("../../core/IOAnimations");
var _IOColors = require("../../core/IOColors");
var _IOStyles = require("../../core/IOStyles");
var _AnimatedTick = require("../common/AnimatedTick");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const internalSpacing = 4;
const styles = _reactNative.StyleSheet.create({
  checkBoxWrapper: {
    width: _IOStyles.IOVisualCostants.avatarSizeSmall,
    height: _IOStyles.IOVisualCostants.avatarSizeSmall,
    padding: internalSpacing
  },
  checkBoxShape: {
    position: "absolute",
    left: 0,
    top: 0,
    width: _IOStyles.IOVisualCostants.avatarSizeSmall,
    height: _IOStyles.IOVisualCostants.avatarSizeSmall,
    borderRadius: _IOStyles.IOVisualCostants.avatarRadiusSizeSmall,
    borderCurve: "continuous"
  }
});

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