import React from 'react';
import { Text, View } from 'react-native';
import { useReactiveVar } from '@apollo/client';
import type { BottomSheetScreenConfig } from '../../componentsDS/BottomSheet';
import StoreSection from '../MyCatalogBottomSheetFilter/StoreSection';
import { formatMessage } from '../../i18n';
import { useTheme } from '../../branding';
import { bottomSheetScreen } from '../../screens/MyCatalogScreen/BottomSheetFilter/constants';
import {
    bottomSheetHeaderAppliedFilters,
    setBottomSheetHeaderAppliedFiltersForScreen
} from '../../apollo/reactive-vars';
import type { FilterScreenValue } from '../../apollo/reactive-vars/bottom-sheet-header-applied-filters';
import themedStyles from './styles';

const createDefaultStoreBottomSheetScreens = (): BottomSheetScreenConfig[] => {
    const StoreScreen = () => {
        const { theme, typography } = useTheme();
        const styles = themedStyles[theme];
        const filters = useReactiveVar(bottomSheetHeaderAppliedFilters);

        // Default store is a single selection: tapping a store replaces the
        // selection; tapping the selected store again clears it.
        const handleStorePress = (
            storeId: string,
            keyScreenName: string,
            currentSelection: FilterScreenValue[]
        ) => {
            const next = currentSelection.includes(storeId) ? [] : [storeId];
            setBottomSheetHeaderAppliedFiltersForScreen(keyScreenName, next);
        };

        return (
            <View style={styles.container}>
                <StoreSection
                    showSectionTitle={false}
                    filters={filters}
                    onStorePress={handleStorePress}
                />
                <Text style={[typography.body1DS, styles.description]}>
                    {formatMessage('account.defaultStoreInfoTooltip')}
                </Text>
            </View>
        );
    };

    return [
        {
            name: bottomSheetScreen.filters,
            options: {
                title: formatMessage('playlist.store')
            },
            component: StoreScreen
        }
    ];
};

export default createDefaultStoreBottomSheetScreens;