import React from 'react';
import { Image, Text, View } from 'react-native';
import TouchableOpacity from '../TouchableOpacity';
import Divider from '../Divider';
import { safeWithTheme } from '../../branding';
import type { ThemeProps } from '../../branding/hoc/types';
import Checkbox from '../../componentsDS/Checkbox';
import styles, { type Styles } from './styles';

export interface Artist {
    id: string;
    name: string;
    imageUrl?: string;
}

interface ArtistRowProps {
    artist: Artist;
    checked: boolean;
    onPress: (artist: Artist) => void;
}

export const ArtistRow = ({
    artist,
    checked,
    onPress,
    theme
}: ArtistRowProps & ThemeProps) => {
    const handlePress = () => onPress(artist);
    const themeStyles = styles[theme] as unknown as Styles;

    return (
        <View>
            <TouchableOpacity
                testID={artist.id}
                style={themeStyles.sectionItem}
                onPress={handlePress}
            >
                <View style={themeStyles.details}>
                    <Image
                        style={themeStyles.artistImage}
                        source={{ uri: artist.imageUrl }}
                    />
                    <Text style={themeStyles.title} numberOfLines={1}>
                        {artist.name}
                    </Text>
                </View>
                <Checkbox checked={checked} onChange={handlePress} />
            </TouchableOpacity>
            <Divider />
        </View>
    );
};

export default safeWithTheme(ArtistRow);