import React, { useCallback, useEffect } from 'react'
import { Pressable } from 'react-native'
import Animated, {
  cancelAnimation,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated'

export default function PressableScale({
  children,
  onPress,
  style,
  contentStyle,
  hitSlop = 8,
  disabled = false,
  scaleTo = 1.5,
  spring = { damping: 18, stiffness: 220, mass: 0.8 },
  ...rest
}) {
  const sv = useSharedValue(1)

  const rStyle = useAnimatedStyle(() => ({
    transform: [{ scale: sv.value }],
  }))

  const pressIn = useCallback(() => {
    if (disabled) return
    cancelAnimation(sv)
    sv.value = 1
    sv.value = withSpring(scaleTo, spring)
  }, [disabled, scaleTo, spring, sv])

  const reset = useCallback(() => {
    cancelAnimation(sv)
    sv.value = withSpring(1, spring)
  }, [spring, sv])

  useEffect(
    () => () => {
      cancelAnimation(sv)
      sv.value = 1
    },
    [sv]
  )

  return (
    <Pressable
      onPressIn={pressIn}
      onPressOut={reset}
      onTouchCancel={reset}
      onHoverOut={reset} // web
      onMouseUp={reset} // web
      onMouseLeave={reset} // web
      onBlur={reset}
      onPress={(e) => {
        onPress?.(e)
        reset()
      }}
      hitSlop={hitSlop}
      disabled={disabled}
      style={style}
      {...rest}
    >
      <Animated.View style={[contentStyle, rStyle]}>{children}</Animated.View>
    </Pressable>
  )
}