import React, { useEffect, useRef } from 'react';
import { Dimensions } from 'react-native';
import BottomSheet from '../../componentsDS/BottomSheet';
import type {
    FilterProps,
    FooterButton
} from '../../componentsDS/BottomSheet/types';
import { useTheme } from '../../branding';
import { formatMessage } from '../../i18n';
import usePreSavedMarkets from '../../hooks/usePreSavedMarkets';
import useSetPreSavedMarkets from '../../hooks/useSetPreSavedMarkets';
import {
    bottomSheetHeaderAppliedFilters,
    setBottomSheetHeaderAppliedFiltersForScreen
} from '../../apollo/reactive-vars';
import { bottomSheetScreen } from '../../screens/MyCatalogScreen/BottomSheetFilter/constants';
import { ACCOUNT_SCREEN } from '../../constants/screens';
import createDefaultMarketBottomSheetScreens from './createDefaultMarketBottomSheetScreens';

interface DefaultMarketSelectorModalProps {
    isVisible: boolean;
    onClose: () => void;
}

const DefaultMarketSelectorModal = ({
    isVisible,
    onClose
}: DefaultMarketSelectorModalProps) => {
    const { colors } = useTheme();
    const { data: savedMarkets } = usePreSavedMarkets();
    const { setMarkets } = useSetPreSavedMarkets();
    const { height: deviceHeight } = Dimensions.get('window');
    const wasVisible = useRef(false);

    // Seed the shared bottom-sheet draft from the saved markets each time the
    // sheet opens, so the Market section reflects the current preference.
    useEffect(() => {
        if (isVisible && !wasVisible.current) {
            wasVisible.current = true;
            bottomSheetHeaderAppliedFilters({
                [bottomSheetScreen.filters]: savedMarkets.length
                    ? [bottomSheetScreen.countries]
                    : [],
                [bottomSheetScreen.countries]: savedMarkets
            });
        }
        if (!isVisible) {
            wasVisible.current = false;
        }
    }, [isVisible, savedMarkets]);

    const handleApply = (
        _routeName: string,
        _currentScreenFilters: unknown,
        filters: FilterProps
    ) => {
        const selectedMarkets = (filters[bottomSheetScreen.countries] ||
            []) as string[];
        setMarkets(selectedMarkets);
        onClose();
    };

    const handleClear = () => {
        setBottomSheetHeaderAppliedFiltersForScreen(
            bottomSheetScreen.countries,
            []
        );
    };

    const footerButtons: FooterButton[] = [
        {
            title: formatMessage('button.clear'),
            onPress: handleClear,
            color: colors.midnight800
        },
        {
            title: formatMessage('filtering.apply'),
            onPress: handleApply,
            color: colors.midnight600
        }
    ];

    return (
        <BottomSheet
            title={formatMessage('filtering.market')}
            isVisible={isVisible}
            onClose={onClose}
            enableDynamicSizing={false}
            showFooterButtons
            snapPoints={[deviceHeight - 100]}
            footerButtons={footerButtons}
            screens={createDefaultMarketBottomSheetScreens({
                parentScreenName: ACCOUNT_SCREEN
            })}
        />
    );
};

export default DefaultMarketSelectorModal;