import React from 'react';
import { Image, View } from 'react-native';
import { useTheme } from '../../branding';
import themedStyles from './styles';
import SectionTitle from './SectionTitle';
import { formatMessage } from '../../i18n';
import Pill from '../../componentsDS/Pill';
import { bottomSheetScreen } from '../../screens/MyCatalogScreen/BottomSheetFilter/constants';
import type { ArtistSectionProps } from './types';
import { ARTIST_SECTION_MAX_VISIBLE_PILLS } from './constants.ts';
import ExpandableList from '../../componentsDS/ExpandableList';
import useRecentSelectedFilters from '../../hooks/useRecentSelectedFilters';
import type { ArtistFilterItem } from './types';
import type { RecentArtistFilter } from '../../types/recent-selected-filters';

const isArtistSelected = (
    artist: RecentArtistFilter,
    activeFilters: ArtistFilterItem[]
) => activeFilters.some(activeArtist => activeArtist.id === artist.id);

export const ArtistSection = ({
    onSearchPress,
    activeFilters,
    onArtistPress
}: ArtistSectionProps) => {
    const { theme } = useTheme();
    const styles = themedStyles[theme];
    const currentScreenName = bottomSheetScreen.artists;
    const { recentArtists } = useRecentSelectedFilters();

    const firstArtist = activeFilters[0];
    const firstName = firstArtist?.name ?? String(firstArtist);
    const count = activeFilters.length - 1;
    const pillLabel = firstName?.toUpperCase();
    const pillSuffix = count ? `+${count}` : undefined;
    const firstImageUrl = firstArtist?.imageUrl;

    const handleSearchPress = () => {
        onSearchPress(currentScreenName);
    };

    return (
        <View style={styles.sectionContainer}>
            <SectionTitle
                title={formatMessage('track.metadata.artist')}
                indicator={{
                    count: activeFilters.length,
                    singularKey: 'filtering.countArtist',
                    pluralKey: 'filtering.countArtists',
                    onPress: handleSearchPress
                }}
            />
            <View style={styles.marketPillsContainer}>
                <ExpandableList
                    maxVisible={ARTIST_SECTION_MAX_VISIBLE_PILLS}
                    style={styles.marketPillsExpandContainer}
                >
                    <Pill search onPress={handleSearchPress} />
                    {activeFilters.length ? (
                        <Pill
                            label={pillLabel}
                            suffix={pillSuffix}
                            selected={activeFilters.length > 0}
                            leftIconComponent={
                                firstImageUrl ? (
                                    <Image
                                        style={styles.artistImage}
                                        source={{ uri: firstImageUrl }}
                                    />
                                ) : undefined
                            }
                        />
                    ) : null}
                    {recentArtists.map(artist => {
                        const selected = isArtistSelected(
                            artist,
                            activeFilters
                        );

                        return (
                            <Pill
                                key={artist.id}
                                label={artist.name.toUpperCase()}
                                selected={selected}
                                leftIconComponent={
                                    artist.imageUrl ? (
                                        <Image
                                            style={styles.artistImage}
                                            source={{ uri: artist.imageUrl }}
                                        />
                                    ) : undefined
                                }
                                onPress={() => onArtistPress(artist, selected)}
                                testID={`recent-artist-pill-${artist.id}`}
                            />
                        );
                    })}
                </ExpandableList>
            </View>
        </View>
    );
};

export default ArtistSection;