import React, { type ReactElement } from 'react';
import { TouchableOpacity, Text, View } from 'react-native';
import { useTheme } from '../../branding';
import themedStyles from './styles';
import ChevRightIcon from '../../components/Icons/ChevRightIcon';
import type { HeaderTitleProps } from './types';

const HeaderTitle = ({
    title,
    onBack,
    activeRouteTitle,
    showBackButton,
    appliedFiltersCount = 0
}: HeaderTitleProps): ReactElement => {
    const { theme, colors } = useTheme();
    const styles = themedStyles[theme];

    return (
        <View style={styles.titleWithChevContainer}>
            {showBackButton ? (
                <TouchableOpacity
                    hitSlop={10}
                    testID="bottomSheetBackButton"
                    accessibilityRole="button"
                    accessibilityLabel="Back"
                    onPress={onBack}
                    style={styles.titleWithChevIcon}
                >
                    <View style={styles.chevBackIcon}>
                        <ChevRightIcon
                            width={16}
                            height={24}
                            color={colors.midnight200}
                        />
                    </View>
                </TouchableOpacity>
            ) : (
                <View />
            )}
            <Text style={styles.title}>
                {activeRouteTitle?.toUpperCase() || title.toUpperCase()}
            </Text>
            {appliedFiltersCount ? (
                <View style={styles.appliedFiltersContainer}>
                    <Text style={styles.appliedFiltersText}>
                        {appliedFiltersCount}
                    </Text>
                </View>
            ) : null}
        </View>
    );
};

export default HeaderTitle;