import React from 'react';
import {Pressable, View} from 'react-native';
import {PhotoIdentifier} from '@react-native-camera-roll/camera-roll';
import {IconPlayerPlayFilled} from '@tabler/icons-react-native';
import Animated, {SharedValue, useAnimatedStyle} from 'react-native-reanimated';
import {Image} from '@components';

import {styles} from './styles';
import {iconRotationTargetSV, iconRotationSV} from '../../utils';

interface MediaCarouselItemProps {
  item: PhotoIdentifier;
  onPress: (item: PhotoIdentifier) => void;
  isExpanded: SharedValue<number>;
}

export const MediaCarouselItem: React.FC<MediaCarouselItemProps> = ({
  item,
  onPress,
  isExpanded,
}) => {
  const isVideo = item.node.type.startsWith('video');

  const rotationStyle = useAnimatedStyle(() => {
    const rotation =
      isExpanded.value === 1
        ? iconRotationSV.value
        : iconRotationTargetSV.value;
    return {
      transform: [{rotate: `${rotation}deg`}],
    };
  });

  return (
    <Animated.View style={rotationStyle}>
      <Pressable onPress={() => onPress(item)} style={styles.container}>
        <Image
          source={{uri: item.node.image.uri}}
          style={styles.thumbnail}
          contentFit="cover"
          timeout={15_000}
        />
        {isVideo && (
          <View style={styles.videoIndicator}>
            <IconPlayerPlayFilled size={16} color="white" />
          </View>
        )}
      </Pressable>
    </Animated.View>
  );
};
