import React from 'react';
import { Text, View } from 'react-native';
import TouchableOpacity from '../../../components/TouchableOpacity';
import ToggleIcon from '../../../components/SortToggle/ToggleIcon';
import { formatMessage, formatUpperCase } from '../../../i18n';
import {
    FOLLOWERS_SORT,
    STREAMS_7_DAYS_SORT,
    ADDED_SORT,
    STREAMS_1_DAY,
    STREAMS_7_DAYS,
    STREAMS_28_DAYS,
    STREAMS_ALL_TIME,
    RELEASE_DATE,
    SALE_START_DATE,
    MOST_RECENT,
    CURRENT_POSITION,
    MARKET_NAME,
    STREAMS_1_DAY_SORT
} from '../../../constants/sorting';
import themedStyles from './styles';
import { useTheme } from '../../../branding';

interface SortButtonProps {
    sortKey: string;
    onSortPress?: () => void;
    disabled?: boolean;
}

export const SortButton: React.FC<SortButtonProps> = ({
    sortKey,
    onSortPress = () => {},
    disabled = false
}) => {
    const { theme, typography } = useTheme();
    const styles = themedStyles[theme];

    const sortLabels: Record<string, string> = {
        [STREAMS_1_DAY]: formatUpperCase('sorting.streams', {
            period: formatMessage('period.days', { days: 1 })
        }),
        [STREAMS_7_DAYS]: formatUpperCase('sorting.streams', {
            period: formatMessage('period.days', { days: 7 })
        }),
        [STREAMS_7_DAYS_SORT]: formatUpperCase('sorting.7dStreams'),
        [STREAMS_28_DAYS]: formatUpperCase('sorting.streams', {
            period: formatMessage('period.days', { days: 28 })
        }),
        [STREAMS_ALL_TIME]: formatUpperCase('sorting.streams', {
            period: formatMessage('period.allTime')
        }),
        [RELEASE_DATE]: formatUpperCase('product.metadata.releaseDate'),
        [SALE_START_DATE]: formatUpperCase('product.metadata.salesStart'),
        [MOST_RECENT]: formatUpperCase('sorting.addedSort'),
        [ADDED_SORT]: formatUpperCase('sorting.addedSort'),
        [FOLLOWERS_SORT]: formatUpperCase('sorting.followers'),
        [CURRENT_POSITION]: formatUpperCase('sorting.position'),
        [MARKET_NAME]: formatUpperCase('sorting.marketName'),
        [STREAMS_1_DAY_SORT]: formatUpperCase('sorting.1dStreams')
    };

    const sortLabel = sortLabels[sortKey];

    return (
        <TouchableOpacity
            style={[
                styles.container,
                disabled && { backgroundColor: 'transparent' }
            ]}
            disabled={disabled}
            onPress={onSortPress}
            testID="sortButton"
        >
            <View style={styles.toggle}>
                <ToggleIcon />
            </View>
            <Text style={[typography.subheading, styles.label]}>
                {sortLabel}
            </Text>
        </TouchableOpacity>
    );
};

export default SortButton;