/**
 * ControlButton — Animated press button for player controls
 */

import React, { useRef, useMemo } from 'react'
import { View, Pressable, StyleSheet, Animated } from 'react-native'

import { Icon, type IconName } from '@/src/shared/components/Icon'
import { BRAND, darkColors } from '@/src/shared/theme'
import { BRAND_DANGER } from '@/src/shared/constants/colors'
import { RADIUS } from '@/src/shared/constants/borderRadius'
import { SPRING } from '@/src/shared/constants/animations'

interface ControlButtonProps {
  icon: IconName
  onPress: () => void
  size?: number
  variant?: 'primary' | 'secondary' | 'danger'
}

export function ControlButton({
  icon,
  onPress,
  size = 64,
  variant = 'primary',
}: ControlButtonProps) {
  const colors = darkColors
  const scaleAnim = useRef(new Animated.Value(1)).current

  const handlePressIn = () => {
    Animated.spring(scaleAnim, {
      toValue: 0.9,
      ...SPRING.SNAPPY,
      useNativeDriver: true,
    }).start()
  }

  const handlePressOut = () => {
    Animated.spring(scaleAnim, {
      toValue: 1,
      ...SPRING.BOUNCY,
      useNativeDriver: true,
    }).start()
  }

  const backgroundColor =
    variant === 'primary'
      ? BRAND.PRIMARY
      : variant === 'danger'
        ? BRAND_DANGER
        : colors.border.dim

  return (
    <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
      <Pressable
        onPressIn={handlePressIn}
        onPressOut={handlePressOut}
        onPress={onPress}
        style={[styles.button, { width: size, height: size, borderRadius: size / 2 }]}
      >
        <View
          style={[
            styles.bg,
            { backgroundColor, borderCurve: 'continuous' },
          ]}
        />
        <Icon name={icon} size={size * 0.4} tintColor={colors.text.primary} />
      </Pressable>
    </Animated.View>
  )
}

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  bg: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    borderRadius: RADIUS.FULL,
  },
})
