import React, { memo } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import CoverArt, { XS } from '../../components/CoverArt';
import { withTheme } from '../../branding';
import Streams from './Streams';
import AddedDate from './AddedDate';
import { PLACEHOLDER } from '../../components/CoverArt/constants';
import styles from './styles';
import type { ThemeModeType } from '../BrandFilters/BrandFilters.tsx';

interface SongTileProps {
    songUrl: string;
    artistName: string;
    songName: string;
    theme: ThemeModeType;
    hasFullInfo?: boolean;
    streamQuantity?: number;
    addedDate?: string;
    onSongTilePress?: () => void;
    isDisabled?: boolean;
    isStreamsVisible?: boolean;
    streamsText?: string;
}

export const SongTile = ({
    songUrl,
    artistName,
    songName,
    theme,
    hasFullInfo = true,
    streamQuantity,
    addedDate,
    onSongTilePress,
    isDisabled = false,
    isStreamsVisible = true,
    streamsText
}: SongTileProps) => {
    const themeStyles = styles[theme];

    return (
        <TouchableOpacity
            onPress={onSongTilePress}
            disabled={isDisabled}
            testID="songTile"
            style={themeStyles.songTileContainer}
        >
            {hasFullInfo ? (
                <View style={themeStyles.songTileRow}>
                    <CoverArt
                        type={PLACEHOLDER}
                        storeIcon={false}
                        size={XS}
                        uri={songUrl}
                        placeholderStyleContainer={themeStyles.songImage}
                        styleImage={themeStyles.songImage}
                    />
                    <View style={themeStyles.songTileDetails}>
                        <View style={themeStyles.songTileRow}>
                            <View style={themeStyles.songTileTextContainer}>
                                <Text
                                    testID="songTileName"
                                    numberOfLines={1}
                                    ellipsizeMode="tail"
                                    style={themeStyles.textPrimary}
                                >
                                    {songName}
                                </Text>
                            </View>
                            {isStreamsVisible ? (
                                <Streams
                                    streamsText={streamsText}
                                    streamQuantity={streamQuantity}
                                />
                            ) : null}
                        </View>
                        <View style={themeStyles.songTileRow}>
                            <View style={themeStyles.songTileTextContainer}>
                                <Text
                                    testID="songTileArtistName"
                                    numberOfLines={1}
                                    ellipsizeMode="tail"
                                    style={themeStyles.textSecondary}
                                >
                                    {artistName}
                                </Text>
                            </View>
                            <AddedDate addedDate={addedDate} />
                        </View>
                    </View>
                </View>
            ) : (
                <View style={themeStyles.infoContainer}>
                    <View
                        style={themeStyles.infoDateContainer}
                        testID="songAddedDateContainer"
                    >
                        <AddedDate addedDate={addedDate} />
                    </View>
                    {isStreamsVisible ? (
                        <Streams
                            streamsText={streamsText}
                            streamQuantity={streamQuantity}
                        />
                    ) : null}
                </View>
            )}
        </TouchableOpacity>
    );
};

export default memo(withTheme(SongTile));