import {useEffect, useRef} from "react";
import {BottomSheetModal, BottomSheetView} from "@gorhom/bottom-sheet";
import {useSelector} from "react-redux";
import {RootState, useAppDispatch} from "../../../redux/store";
import {closeFilter} from "../../../features/filterSlice/filterSlice";
import SortingModalBody from "./SortingModalBody";
import {View} from "react-native";

export const SortingModal = () => {
    const dispatch = useAppDispatch();
    const modalRef = useRef<BottomSheetModal>(null);
    const visible = useSelector((state: RootState) => state.filter.visible);

    useEffect(() => {
        if (!modalRef.current) return;
        if (visible) {
            modalRef.current.present();
        } else {
            modalRef.current.dismiss();
        }
    }, [visible]);
    return (
        <BottomSheetModal
            onDismiss={() => dispatch(closeFilter())}
            ref={modalRef}
        >
            <BottomSheetView>
                <View>

                    <SortingModalBody/>
                </View>

            </BottomSheetView>
        </BottomSheetModal>
    )
};

