import React, {createContext, PropsWithChildren, useEffect, useRef, useState} from "react";


interface MainContainerContextInterface {
    containerRef: any
}

const MainContainerContext = createContext({} as MainContainerContextInterface);

export const MainContainerContextProvider: React.FC<PropsWithChildren> = (props) => {
    const containerRef = useRef();
    const [windowWidth, setWindowWidth] = useState(window.innerWidth)

    const _setWindowWidth = () => {

        setWindowWidth(window.innerWidth)
    }

    useEffect(() => {
            window.addEventListener('resize', _setWindowWidth)
            return () => {
                window.removeEventListener('resize', _setWindowWidth)
            }

        },
        // @ts-ignore
        [])

    return (
        <MainContainerContext.Provider value={{containerRef}}>
            {props.children}
        </MainContainerContext.Provider>
    );
};

export default MainContainerContext;