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 useDefaultStoreFilters from '../../hooks/useDefaultStoreFilters';
import useSetPreSavedStores from '../../hooks/useSetPreSavedStores';
import {
    bottomSheetHeaderAppliedFilters,
    setBottomSheetHeaderAppliedFiltersForScreen
} from '../../apollo/reactive-vars';
import { bottomSheetScreen } from '../../screens/MyCatalogScreen/BottomSheetFilter/constants';
import { stores } from '../MyCatalogBottomSheetFilter/constants';
import createDefaultStoreBottomSheetScreens from './createDefaultStoreBottomSheetScreens';

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

const getStoreNameById = (storeId?: string) =>
    stores.find(store => String(store.value) === storeId)?.storeName;

const DefaultStoreSelectorModal = ({
    isVisible,
    onClose
}: DefaultStoreSelectorModalProps) => {
    const { colors } = useTheme();
    const { defaultStoreIds } = useDefaultStoreFilters();
    const { setStore } = useSetPreSavedStores();
    const { height: deviceHeight } = Dimensions.get('window');
    const wasVisible = useRef(false);

    // Seed the shared draft from the saved default store each time it opens.
    useEffect(() => {
        if (isVisible && !wasVisible.current) {
            wasVisible.current = true;
            bottomSheetHeaderAppliedFilters({
                [bottomSheetScreen.filters]: defaultStoreIds.length
                    ? [bottomSheetScreen.stores]
                    : [],
                [bottomSheetScreen.stores]: defaultStoreIds.map(String)
            });
        }
        if (!isVisible) {
            wasVisible.current = false;
        }
    }, [isVisible, defaultStoreIds]);

    const handleApply = (
        _routeName: string,
        _currentScreenFilters: unknown,
        filters: FilterProps
    ) => {
        const selected = (filters[bottomSheetScreen.stores] || []) as string[];
        setStore(getStoreNameById(selected[0]));
        onClose();
    };

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

    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('playlist.store')}
            isVisible={isVisible}
            onClose={onClose}
            enableDynamicSizing={false}
            showFooterButtons
            snapPoints={[deviceHeight - 100]}
            footerButtons={footerButtons}
            screens={createDefaultStoreBottomSheetScreens()}
        />
    );
};

export default DefaultStoreSelectorModal;