"use strict";

import { memo, useCallback, useMemo } from "react";
import { Pressable, StyleSheet } from "react-native";
import ReactNativeHapticFeedback from "react-native-haptic-feedback";
import Animated, { interpolateColor, useAnimatedStyle, useReducedMotion } from "react-native-reanimated";
import { useIOTheme } from "../../context";
import { hexToRgba, IOColors } from "../../core";
import { useScaleAnimation } from "../../hooks";
import { IOText } from "../typography";
import { jsx as _jsx } from "react/jsx-runtime";
const numberPadBtnSize = 56;

/**
 * Based on a `Pressable` element, it displays a number button with animations on press In and Out.
 *
 * @returns {JSX.Element} The rendered `NumberButton`
 */
export const NumberButton = /*#__PURE__*/memo(({
  number,
  variant,
  onPress
}) => {
  const theme = useIOTheme();
  const {
    progress,
    onPressIn,
    onPressOut,
    scaleAnimatedStyle
  } = useScaleAnimation("medium");
  const reducedMotion = useReducedMotion();
  const colorMap = useMemo(() => ({
    neutral: {
      background: hexToRgba(IOColors[theme["interactiveElem-default"]], 0.1),
      pressed: hexToRgba(IOColors[theme["interactiveElem-default"]], 0.35),
      foreground: theme["interactiveElem-default"]
    },
    primary: {
      background: hexToRgba(IOColors.white, 0.15),
      pressed: hexToRgba(IOColors.white, 0.5),
      foreground: "white"
    }
  }), [theme]);

  // Interpolate animation values from `isPressed` values
  const pressedAnimationStyle = useAnimatedStyle(() => ({
    backgroundColor: interpolateColor(progress.value, [0, 1], [colorMap[variant].background, colorMap[variant].pressed])
  }));
  const handleOnPress = useCallback(() => {
    ReactNativeHapticFeedback.trigger("impactLight");
    onPress(number);
  }, [number, onPress]);
  return /*#__PURE__*/_jsx(Pressable, {
    accessible: true,
    accessibilityRole: "button",
    onPressIn: onPressIn,
    onPressOut: onPressOut,
    onPress: handleOnPress,
    children: /*#__PURE__*/_jsx(Animated.View, {
      style: [numberButtonStyles.circularButton, numberButtonStyles.buttonSize, pressedAnimationStyle, !reducedMotion && scaleAnimatedStyle],
      children: /*#__PURE__*/_jsx(IOText, {
        size: 22,
        weight: "Semibold",
        color: colorMap[variant].foreground,
        style: {
          // Additional prop for Android
          textAlignVertical: "center"
        },
        children: number
      })
    })
  });
});
export const numberButtonStyles = StyleSheet.create({
  circularButton: {
    alignItems: "center",
    justifyContent: "center",
    borderRadius: numberPadBtnSize / 2
  },
  buttonSize: {
    width: numberPadBtnSize,
    height: numberPadBtnSize
  }
});
//# sourceMappingURL=NumberButton.js.map