import React, { memo } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { withTheme } from '../../branding';
import CoverArt, { MEDIUM_LARGE } from '../../components/CoverArt';
import StoreIcon from '../../components/Icons/StoreIcon';
import Metrics from '../Metrics';
import SongTile from '../SongTile';
import styles from './styles';
import { PLACEHOLDER } from '../../components/CoverArt/constants';
import { PLAYLIST_TYPE_TO_FORMATTED_NAME } from '../../constants/playlist-types';
import { formatMessage } from '../../i18n';
import OrderLabel from '../OrderLabel';
import type { ThemeModeType } from '../BrandFilters/BrandFilters.tsx';

interface PlaylistCardProps {
    theme: ThemeModeType;
    playlistUrl?: string;
    source: any;
    playlistName?: string;
    playlistType?: string;
    followersCount?: number;
    trendValue?: number;
    countryCode?: string;
    isNewlyEntered?: boolean;
    songName: string;
    artistName: string;
    songUrl: string;
    streamQuantity?: number;
    hasFullSongInfo?: boolean;
    isStreamsVisible?: boolean;
    addedDate?: string;
    positionValue?: number;
    placement?: any;
    onPlaylistPress?: (placement?: any) => void;
    onSoundRecordingPress?: (soundRecording?: any) => void;
    soundRecording?: any;
    elementOrderLabel?: number;
    streamsText?: string;
}

export const PlaylistCard = ({
    theme,
    playlistUrl,
    source,
    playlistName = '',
    playlistType = '',
    followersCount,
    trendValue,
    countryCode,
    isNewlyEntered,
    songName,
    artistName,
    songUrl,
    streamQuantity,
    hasFullSongInfo,
    isStreamsVisible,
    addedDate,
    positionValue,
    placement,
    onPlaylistPress,
    onSoundRecordingPress,
    soundRecording,
    elementOrderLabel,
    streamsText
}: PlaylistCardProps) => {
    const themeStyles = styles[theme];
    const playlistTypeKey = PLAYLIST_TYPE_TO_FORMATTED_NAME[playlistType];

    const handlePlaylistPress = () =>
        onPlaylistPress && onPlaylistPress(placement);

    const handleSongTilePress = () =>
        onSoundRecordingPress && onSoundRecordingPress(soundRecording);

    const isTileDisabled = !onSoundRecordingPress;

    return (
        <View testID="cardPlaylist" style={themeStyles.playlistCardContainer}>
            <TouchableOpacity
                onPress={handlePlaylistPress}
                style={themeStyles.header}
                disabled={!onPlaylistPress}
            >
                <View>
                    <CoverArt
                        storeIcon={false}
                        size={MEDIUM_LARGE}
                        uri={playlistUrl}
                        placeholderStyleContainer={themeStyles.playlistImage}
                        type={PLACEHOLDER}
                        styleImage={themeStyles.playlistImage}
                    />
                    <OrderLabel label={elementOrderLabel} />
                </View>
                <View style={themeStyles.infoContainer} testID="playlistCard">
                    <View
                        style={themeStyles.cardTitle}
                        testID="playlistCardTitleContainer"
                    >
                        <StoreIcon source={source} />
                        <Text
                            testID="playlistCardTitle"
                            numberOfLines={1}
                            ellipsizeMode="tail"
                            style={themeStyles.playlistName}
                        >
                            {playlistName}
                        </Text>
                    </View>
                    <Text
                        testID="playlistCardType"
                        style={themeStyles.playlistType}
                    >
                        {formatMessage(
                            `playlist.ownerCategory.${playlistTypeKey}`
                        ).toUpperCase()}
                    </Text>
                    <Metrics
                        followersCount={followersCount}
                        trendValue={trendValue}
                        countryCode={countryCode}
                        isNewlyEntered={isNewlyEntered}
                        positionValue={positionValue}
                    />
                </View>
            </TouchableOpacity>
            <SongTile
                onSongTilePress={handleSongTilePress}
                songUrl={songUrl}
                artistName={artistName}
                songName={songName}
                streamQuantity={streamQuantity}
                hasFullInfo={hasFullSongInfo}
                addedDate={addedDate}
                isDisabled={isTileDisabled}
                isStreamsVisible={isStreamsVisible}
                streamsText={streamsText}
            />
        </View>
    );
};

export default memo(withTheme(PlaylistCard));