import { useState, createContext, useContext, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import useScrollLock from '@hooks/useScrollLock';
import { useThemeProvider } from "@contexts/themeContext";
import { useSelector } from 'react-redux';
import { getFreeWithdraw, getIsBindPhone } from '@features/mainSlice';

const WithdrawMissionContext = createContext(undefined);

export const WithdrawMissionProvider = ({ children }) => {
    const { isMobile } = useThemeProvider();
    const [open, setOpen] = useState(false);
    const location = useLocation();
    const setIsLocked = useScrollLock();

    // close sidebar when route changes
    // useEffect(() => {
    //     if (isMobile())setOpen(false);
    // }, [location]);

    useEffect(() => {
        // if (open) {
        //     setIsLocked(true);
        // } else {
        //     setIsLocked(false);
        // }
        setIsLocked(false);

        return () => {
            setIsLocked(false);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [open]);
    return (
        <WithdrawMissionContext.Provider value={{ open, setOpen }}>
            {children}
        </WithdrawMissionContext.Provider>
    )
}

export const useWithdrawMission = () => useContext(WithdrawMissionContext);
