import { BlurView } from 'expo-blur'
import React from 'react'
import { Image, Platform, Pressable, StyleSheet, Text, View } from 'react-native'
import { Feather } from '@expo/vector-icons'
import ProfilePicture from '../../../components/ProfilePicture'
import { icons } from '../../../assets'
import { Palette } from '../../../styles'
import { FONT_FAMILY } from '../../../styles/Fonts'
import { size } from '../../../styles/Style'

const PlaybackActions = ({
  owner,
  currentUID,
  isFollowing,
  isFollowActionPending,
  onToggleFollow,
  likesCount,
  isLiked,
  onToggleLike,
  commentsCount,
  onCommentsPress,
  onShare,
  onReport,
  onOpenProfile,
}) => {
  return (
    <View style={styles.actionsColumn}>
      <View style={styles.profileWrapper}>
        <Pressable onPress={onOpenProfile}>
          <ProfilePicture
            uri={owner?.profilePictureURL || null}
            size={45}
            imageProps={{ priority: 'high' }}
          />
        </Pressable>
        {owner?.id && owner.id !== currentUID && (
          <Pressable disabled={isFollowActionPending} onPress={onToggleFollow}>
            <BlurView
              tint="dark"
              intensity={Platform.OS !== 'ios' ? 10 : 20}
              style={[
                styles.followButton,
                { backgroundColor: isFollowing ? '#FFFFFF1A' : undefined },
              ]}
            >
              <Text style={styles.followText}>{isFollowing ? 'Suivi(e)' : 'Suivre'}</Text>
            </BlurView>
          </Pressable>
        )}
      </View>
      <Pressable onPress={onToggleLike} style={styles.centered}>
        <Image
          source={isLiked ? icons.heart : icons.heartOutline}
          style={size({ size: 26 })}
          resizeMode="contain"
        />
        {!!likesCount && <Text style={styles.countText}>{likesCount}</Text>}
      </Pressable>
      <Pressable onPress={onCommentsPress} style={styles.centered}>
        <Image source={icons.chatBubble} style={size({ size: 26 })} />
        {!!commentsCount && <Text style={styles.countText}>{commentsCount}</Text>}
      </Pressable>
      <Pressable onPress={onShare}>
        <Image source={icons.share} style={size({ size: 26 })} />
      </Pressable>
      <Pressable onPress={onReport} style={styles.centered}>
        <Feather name="flag" size={26} color={Palette.white} />
        <Text style={styles.countText}>Signaler</Text>
      </Pressable>
    </View>
  )
}

const styles = StyleSheet.create({
  actionsColumn: {
    alignSelf: 'flex-end',
    alignItems: 'center',
    gap: 20,
    paddingHorizontal: 13,
  },
  profileWrapper: { gap: 6, alignItems: 'center' },
  followButton: {
    paddingVertical: 6,
    paddingHorizontal: 12,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: Palette.white,
    overflow: 'hidden',
  },
  followText: {
    fontSize: 13,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterMedium,
  },
  centered: { alignItems: 'center' },
  countText: {
    color: Palette.white,
    fontSize: 11,
    marginTop: 4,
    fontFamily: FONT_FAMILY.InterMedium,
    textAlign: 'center',
  },
})

export default PlaybackActions