import React from 'react';
import { Text, View } from 'react-native';
import { useReactiveVar } from '@apollo/client';
import type { BottomSheetScreenConfig } from '../../componentsDS/BottomSheet';
import MarketSection from '../MyCatalogBottomSheetFilter/MarketSection';
import MyCatalogCountryFilterModal from '../MyCatalogCountryFilterModal';
import { formatMessage } from '../../i18n';
import { useTheme } from '../../branding';
import { bottomSheetScreen } from '../../screens/MyCatalogScreen/BottomSheetFilter/constants';
import {
    bottomSheetHeaderAppliedFilters,
    setBottomSheetHeaderAppliedFiltersForScreen
} from '../../apollo/reactive-vars';
import { regions } from '../../constants/regions';
import type { RegionName } from '../../constants/regions';
import themedStyles from './styles';

interface CreateDefaultMarketBottomSheetScreensParams {
    parentScreenName: string;
}

const createDefaultMarketBottomSheetScreens = ({
    parentScreenName
}: CreateDefaultMarketBottomSheetScreensParams): BottomSheetScreenConfig[] => {
    const MarketScreen = ({
        navigation
    }: {
        navigation: { navigate: (name: string) => void };
    }) => {
        const { theme, typography } = useTheme();
        const styles = themedStyles[theme];
        const filters = useReactiveVar(bottomSheetHeaderAppliedFilters);

        const updateMarkets = (countryCodes: string[]) => {
            setBottomSheetHeaderAppliedFiltersForScreen(
                bottomSheetScreen.countries,
                countryCodes
            );
        };

        const handleRegionPress = (region: RegionName, isSelected: boolean) => {
            updateMarkets(isSelected ? [] : Object.keys(regions[region]));
        };

        const handleCountryPress = (country: string, isSelected: boolean) => {
            updateMarkets(isSelected ? [] : [country]);
        };

        const handleCountriesPress = (
            countries: string[],
            isSelected: boolean
        ) => {
            updateMarkets(isSelected ? [] : countries);
        };

        const handleSearchPress = (navigationName: string) => {
            navigation.navigate(navigationName);
        };

        return (
            <View style={styles.container}>
                <MarketSection
                    showSectionTitle={false}
                    filters={filters}
                    onSearchPress={handleSearchPress}
                    onRegionPress={handleRegionPress}
                    onCountryPress={handleCountryPress}
                    onCountriesPress={handleCountriesPress}
                />
                <Text style={[typography.body1DS, styles.description]}>
                    {formatMessage('account.defaultMarketInfoTooltip')}
                </Text>
            </View>
        );
    };

    const CountriesScreen = () => (
        <MyCatalogCountryFilterModal
            hasRedesignBottomSheet
            parentScreenName={parentScreenName}
        />
    );

    return [
        {
            name: bottomSheetScreen.filters,
            options: {
                title: formatMessage('filtering.market')
            },
            component: MarketScreen
        },
        {
            name: bottomSheetScreen.countries,
            options: {
                title: formatMessage('filtering.market')
            },
            component: CountriesScreen
        }
    ];
};

export default createDefaultMarketBottomSheetScreens;