import React, { memo, useCallback, useMemo } from 'react'
import { View, StyleSheet } from 'react-native'
import { LikeButton, LikeButtonProps } from './LikeButton'
import { FavoriteButton, FavoriteButtonProps } from './FavoriteButton'

export interface VideoSocialButtonProps {
  templateId: string
  liked?: boolean
  favorited?: boolean
  likeCount?: number
  favoriteCount?: number
  loading?: boolean
  onLike?: () => void
  onUnlike?: () => void
  onFavorite?: () => void
  onUnfavorite?: () => void
  testID?: string
}

const VideoSocialButtonComponent: React.FC<VideoSocialButtonProps> = ({
  templateId,
  liked = false,
  favorited = false,
  likeCount,
  favoriteCount,
  loading = false,
  onLike,
  onUnlike,
  onFavorite,
  onUnfavorite,
  testID,
}) => {
  // 处理点赞按钮点击
  const handleLikePress = useCallback(() => {
    if (!loading) {
      if (liked) {
        onUnlike?.()
      } else {
        onLike?.()
      }
    }
  }, [loading, liked, onLike, onUnlike])

  // 处理收藏按钮点击
  const handleFavoritePress = useCallback(() => {
    if (!loading) {
      if (favorited) {
        onUnfavorite?.()
      } else {
        onFavorite?.()
      }
    }
  }, [loading, favorited, onFavorite, onUnfavorite])

  // LikeButton 的 props
  const likeButtonProps: LikeButtonProps = useMemo(
    () => ({
      liked,
      loading,
      count: likeCount,
      onPress: handleLikePress,
      testID: testID ? `${testID}-like-button` : undefined,
    }),
    [liked, loading, likeCount, handleLikePress, testID]
  )

  // FavoriteButton 的 props
  const favoriteButtonProps: FavoriteButtonProps = useMemo(
    () => ({
      favorited,
      loading,
      count: favoriteCount,
      onPress: handleFavoritePress,
      testID: testID ? `${testID}-favorite-button` : undefined,
    }),
    [favorited, loading, favoriteCount, handleFavoritePress, testID]
  )

  return (
    <View style={styles.container} testID={testID}>
      {/* 点赞按钮 */}
      <View style={styles.button}>
        <LikeButton {...likeButtonProps} />
      </View>

      {/* 收藏按钮 */}
      <View style={styles.button}>
        <FavoriteButton {...favoriteButtonProps} />
      </View>
    </View>
  )
}

export const VideoSocialButton = memo(VideoSocialButtonComponent)

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    right: 13,
    bottom: 100,
    flexDirection: 'column',
    alignItems: 'center',
    gap: 16,
  },
  button: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: 'rgba(25, 27, 31, 0.8)',
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'rgba(47, 49, 52, 1)',
  },
})