import React from 'react';
import { View } from 'react-native';
import { safeWithTheme, useTheme } from '../../branding';
import SegmentItem from './SegmentItem';
import FiltersSummarySkeleton from './FiltersSummarySkeleton';
import themedStyles from './styles';
import useFiltersSummary from './useFiltersSummary';

interface FiltersSummaryContentProps {
    orderBy: string;
    showStore?: boolean;
}

const FiltersSummaryContent: React.FC<FiltersSummaryContentProps> = ({
    orderBy,
    showStore
}) => {
    const { theme } = useTheme();
    const styles = themedStyles[theme];
    const { segments, loading } = useFiltersSummary({ orderBy, showStore });

    if (loading) {
        return <FiltersSummarySkeleton />;
    }

    if (!segments.length) {
        return null;
    }

    return (
        <View style={styles.container} accessibilityLabel={'FiltersSummary'}>
            {segments.map(segment => (
                <SegmentItem key={segment.key} segment={segment} />
            ))}
        </View>
    );
};

export default safeWithTheme(FiltersSummaryContent);