import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { capitalCase } from 'change-case';
import styles from './styles';
import { useTheme } from '../../branding';
import ChevDownBold from '../Icons/ChevDownBold';
import StoreIcon from '../../components/Icons/StoreIcon';
import { formatMessage } from '../../i18n';

interface StoreSelectionButtonProps {
    title?: string;
    onButtonPress?: () => void;
    storeName?: string;
}

const StoreSelectionButton = ({
    title = 'All Stores',
    onButtonPress,
    storeName
}: StoreSelectionButtonProps) => {
    const { theme } = useTheme();
    const themeStyles = styles[theme];
    const defaultButtonText = formatMessage('filtering.allStores');
    const buttonText = title || defaultButtonText;

    return (
        <TouchableOpacity
            testID="storeSelectionButton"
            style={themeStyles.container}
            onPress={onButtonPress}
        >
            {storeName ? (
                <StoreIcon
                    style={themeStyles.storeIcon}
                    storeName={storeName}
                />
            ) : null}
            <Text testID="storeSelectionButtonTitle" style={themeStyles.title}>
                {capitalCase(buttonText).toUpperCase()}
            </Text>
            <ChevDownBold />
        </TouchableOpacity>
    );
};

export default StoreSelectionButton;