import type { ReactNode } from 'react';
import { Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import { AppIcon } from './app-icon';
import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';

export type ComposeMediaCarouselItem = {
  id: string;
  uri: string;
  mediaType: 'image' | 'video';
};

const TILE_SIZE = 168;

export function ComposeMediaCarousel({
  items,
  limit,
  onRemove,
  renderVideo,
}: {
  items: ComposeMediaCarouselItem[];
  limit: number;
  onRemove: (id: string) => void;
  renderVideo?: (uri: string) => ReactNode;
}) {
  if (!items.length) return null;

  return (
    <View style={styles.wrap}>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.scrollContent}
      >
        {items.map((item) => (
          <View key={item.id} style={styles.tile}>
            {item.mediaType === 'video' ? (
              renderVideo ? (
                renderVideo(item.uri)
              ) : (
                <View style={styles.videoFallback}>
                  <Text style={styles.videoFallbackText}>Vídeo</Text>
                </View>
              )
            ) : (
              <Image source={{ uri: item.uri }} style={styles.media} resizeMode="cover" />
            )}
            <Pressable
              onPress={() => onRemove(item.id)}
              accessibilityRole="button"
              accessibilityLabel="Remover mídia"
              style={styles.removeBtn}
            >
              <AppIcon name="close" size={14} color={m3Colors.onPrimary} />
            </Pressable>
          </View>
        ))}
      </ScrollView>
      <Text style={styles.counter}>
        {items.length}/{limit}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: {
    marginTop: spacing.md,
    marginLeft: 48,
  },
  scrollContent: {
    gap: spacing.sm,
    paddingRight: spacing.md,
  },
  tile: {
    width: TILE_SIZE,
    height: TILE_SIZE,
    borderRadius: m3Shape.cornerLarge,
    overflow: 'hidden',
    backgroundColor: m3Colors.surfaceContainerHigh,
  },
  media: {
    width: '100%',
    height: '100%',
  },
  videoFallback: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  videoFallbackText: {
    color: m3Colors.onSurfaceVariant,
    fontFamily: fonts.medium,
    fontSize: 13,
  },
  removeBtn: {
    position: 'absolute',
    top: spacing.xs,
    right: spacing.xs,
    width: 30,
    height: 30,
    borderRadius: 15,
    backgroundColor: m3Colors.scrim,
    alignItems: 'center',
    justifyContent: 'center',
  },
  counter: {
    marginTop: spacing.xs,
    color: m3Colors.onSurfaceVariant,
    fontFamily: fonts.medium,
    fontSize: 12,
  },
});