import {useEffect, useState, PropsWithChildren} from "react"
import {PageLoader} from "../atoms"
import {PageLoaderContext} from "../contexts"
import {IPageLoaderProps} from "../props"

export const PageLoaderProvider = ({children}: PropsWithChildren) => {
  const [loading, setLoading] = useState(false)
  const toggleLoading = (loading?: boolean) => setLoading(loading || false)
  const value: IPageLoaderProps = {toggleLoading, loading}

  useEffect(() => {
    if (loading) document.body.style.overflow = "hidden"
    else document.body.style.removeProperty("overflow")
  }, [loading])

  return (
    <PageLoaderContext.Provider value={value}>
      <PageLoader loading={loading} />
      {children}
    </PageLoaderContext.Provider>
  )
}