import React from 'react';
import { View } from 'react-native';
import { useTheme } from '../../branding';
import themedStyles from './styles';
import SectionTitle from './SectionTitle';
import { formatMessage } from '../../i18n';
import Pill from '../../componentsDS/Pill';
import { bottomSheetScreen } from '../../screens/MyCatalogScreen/BottomSheetFilter/constants';
import type { LabelSectionProps } from './types';
import { LABEL_SECTION_MAX_VISIBLE_PILLS } from './constants.ts';
import ExpandableList from '../../componentsDS/ExpandableList';
import useRecentSelectedFilters from '../../hooks/useRecentSelectedFilters';
import { getLabelId } from '../../components/LabelRow/utils';
import type { NamedFilterItem } from '../../apollo/reactive-vars/bottom-sheet-header-applied-filters';
import type { RecentLabelFilter } from '../../types/recent-selected-filters';

const isLabelSelected = (
    label: RecentLabelFilter,
    activeFilters: NamedFilterItem[]
) =>
    activeFilters.some(activeLabel => {
        if (activeLabel.name === label.name) {
            return true;
        }

        if (!label.id || !activeLabel?.id) {
            return false;
        }

        return (
            getLabelId(activeLabel as RecentLabelFilter) === getLabelId(label)
        );
    });

export const LabelSection = ({
    onSearchPress,
    activeFilters,
    onLabelPress
}: LabelSectionProps) => {
    const { theme } = useTheme();
    const styles = themedStyles[theme];
    const currentScreenName = bottomSheetScreen.labels;
    const { recentLabels } = useRecentSelectedFilters();

    const firstName = activeFilters[0]?.name ?? String(activeFilters[0]);
    const count = activeFilters.length - 1;
    const pillLabel = firstName?.toUpperCase();
    const pillSuffix = count ? `+${count}` : undefined;

    const handleOnSearchPress = () => onSearchPress(currentScreenName);

    return (
        <View style={styles.sectionContainer}>
            <SectionTitle
                title={formatMessage('track.metadata.label')}
                indicator={{
                    count: activeFilters.length,
                    singularKey: 'filtering.countLabel',
                    pluralKey: 'filtering.countLabels',
                    onPress: handleOnSearchPress
                }}
            />
            <View style={styles.marketPillsContainer}>
                <ExpandableList
                    maxVisible={LABEL_SECTION_MAX_VISIBLE_PILLS}
                    style={styles.marketPillsExpandContainer}
                >
                    <Pill search onPress={handleOnSearchPress} />
                    {activeFilters.length ? (
                        <Pill
                            label={pillLabel}
                            suffix={pillSuffix}
                            selected={activeFilters.length > 0}
                        />
                    ) : null}
                    {recentLabels.map(label => {
                        const selected = isLabelSelected(label, activeFilters);

                        return (
                            <Pill
                                key={getLabelId(label)}
                                label={label.name.toUpperCase()}
                                selected={selected}
                                onPress={() => onLabelPress(label, selected)}
                                testID={`recent-label-pill-${getLabelId(
                                    label
                                )}`}
                            />
                        );
                    })}
                </ExpandableList>
            </View>
        </View>
    );
};

export default LabelSection;