import React from 'react';
import { Text, View } from 'react-native';
import { safeWithTheme, useTheme } from '../../branding';
import TouchableOpacity from '../../components/TouchableOpacity';
import themedStyles from './styles';
import type { FloatingButtonProps } from './types';

const ICON_SIZE = 16;
const noop = () => {};

export const FloatingButton: React.FC<FloatingButtonProps> = ({
    icon: Icon,
    label,
    count,
    onPress,
    testID = 'floatingButton',
    accessibilityLabel
}) => {
    const { colors, theme } = useTheme();
    const styles = themedStyles[theme];

    const hasLabel = label !== undefined;
    const showBadge = count !== undefined && count > 0;

    return (
        <TouchableOpacity
            style={[styles.container, !hasLabel && styles.containerIconOnly]}
            onPress={onPress ?? noop}
            testID={testID}
            accessibilityRole="button"
            accessibilityLabel={accessibilityLabel ?? label}
        >
            <View
                style={[
                    styles.labelGroup,
                    hasLabel && styles.labelGroupWithLabel
                ]}
            >
                <View style={styles.iconContainer}>
                    <Icon color={colors.midnight850} size={ICON_SIZE} />
                </View>
                {hasLabel && (
                    <Text style={styles.label} numberOfLines={1}>
                        {label}
                    </Text>
                )}
            </View>
            {showBadge && (
                <View style={styles.badge} testID={`${testID}-badge`}>
                    <Text style={styles.badgeLabel}>{count}</Text>
                </View>
            )}
        </TouchableOpacity>
    );
};

export default safeWithTheme(FloatingButton);