import React, { memo } from 'react';
import { Text, View } from 'react-native';
import TouchableOpacity from '../TouchableOpacity';
import Divider from '../Divider';
import CheckIcon from '../Icons/CheckIcon';
import GlobalFlagIcon, { globalFlagIconSize } from '../Icons/GlobalFlagIcon';
import { formatMessage } from '../../i18n';
import { useTheme } from '../../branding';
import Checkbox from '../../componentsDS/Checkbox';
import CountryFlag from 'react-native-country-flag';
import styles, { type Styles } from './styles';

export interface Country {
    countryCode: string;
    name: string;
}

interface CountryRowProps {
    country: Country;
    checked?: boolean;
    onPress: (country: Country) => void;
    isMulti?: boolean;
    hasRedesignBottomSheet?: boolean;
}

export const CountryRow = ({
    country,
    checked,
    onPress,
    isMulti = true,
    hasRedesignBottomSheet = false
}: CountryRowProps) => {
    const { theme, colors } = useTheme();
    const handlePress = () => onPress(country);
    const themeStyles = styles[theme] as unknown as Styles;

    return (
        <>
            <TouchableOpacity
                testID="countryRow"
                style={themeStyles.sectionItem}
                onPress={handlePress}
            >
                {hasRedesignBottomSheet ? (
                    <View style={themeStyles.countryContainer}>
                        {country.countryCode === 'GLOBAL' ? (
                            <View style={themeStyles.countryFlag}>
                                <GlobalFlagIcon size={globalFlagIconSize.s} />
                            </View>
                        ) : (
                            <CountryFlag
                                style={themeStyles.countryFlag}
                                isoCode={country.countryCode}
                                size={13}
                            />
                        )}
                        <Text
                            numberOfLines={1}
                            ellipsizeMode="tail"
                            style={themeStyles.linkText}
                        >
                            {country.name}
                            {country.countryCode === 'GLOBAL' && (
                                <Text style={themeStyles.subtext}>
                                    {` (${formatMessage(
                                        'home.topTracks.default'
                                    )})`}
                                </Text>
                            )}
                        </Text>
                    </View>
                ) : (
                    <Text
                        numberOfLines={1}
                        ellipsizeMode="tail"
                        style={themeStyles.linkText}
                    >
                        {country.name}
                        {country.countryCode === 'GLOBAL' && (
                            <Text style={themeStyles.subtext}>
                                {` (${formatMessage(
                                    'home.topTracks.default'
                                )})`}
                            </Text>
                        )}
                    </Text>
                )}
                {isMulti ? (
                    <Checkbox
                        checked={checked ?? false}
                        onChange={handlePress}
                        color={colors.midnight600}
                    />
                ) : (
                    checked && <CheckIcon />
                )}
            </TouchableOpacity>
            <Divider />
        </>
    );
};

export default memo(CountryRow);