/* eslint-disable @typescript-eslint/no-explicit-any */

import type { FC } from 'react';
import React from 'react';
import { Image, Text, View } from 'react-native';
import { withTheme } from '../../../branding';
import type { ThemeProps } from '../../../branding/hoc/types';
import type { Styles } from './styles';
import themedStyles from './styles';
import { formatMessage } from '../../../i18n';
import ChevRightIcon from '../../../components/Icons/ChevRightIcon';
import TouchableOpacity from '../../../components/TouchableOpacity';
import type { FilterArtistItem } from '../../../components/FilterArtist/types';

interface Props {
    artist: FilterArtistItem | undefined;
    onPress: () => void;
}

export const SelectArtistItem = ({
    artist,
    onPress,
    theme,
    colors
}: Props & ThemeProps) => {
    const styles = (themedStyles as any)[theme] as Styles;

    const renderSelectedArtist = ({ name, imageUrl }: FilterArtistItem) => (
        <>
            <Image
                style={styles.image}
                source={{
                    uri: imageUrl
                }}
            />
            <Text style={styles.title} numberOfLines={1}>
                {name}
            </Text>
        </>
    );

    const renderNotSelectedArtist = () => (
        <Text style={styles.title} numberOfLines={1}>
            {formatMessage('newUser.selectArtist')}
        </Text>
    );

    return (
        <TouchableOpacity
            style={styles.container}
            onPress={onPress}
            testID="selectArtist"
        >
            <View style={styles.contentContainer}>
                {artist
                    ? renderSelectedArtist(artist)
                    : renderNotSelectedArtist()}
            </View>
            <View style={styles.arrowIconContainer}>
                <ChevRightIcon color={colors.midnight200} />
            </View>
        </TouchableOpacity>
    );
};

export default withTheme(SelectArtistItem) as FC<Props>;