import React, { useState, useCallback, useEffect } from 'react';
import SidebarContext from '@theme/_contexts/SidebarContext';

function useLockBodyScroll(lock = true) {
  useEffect(() => {
    document.body.style.overflow = lock ? 'hidden' : 'visible';
    return () => {
      document.body.style.overflow = 'visible';
    };
  }, [lock]);
}

function SidebarProvider(props) {
  const [sidebarShown, setSidebarShown] = useState(false);

  useLockBodyScroll(sidebarShown);

  const showSidebar = useCallback(() => {
    setSidebarShown(true);
    // console.log('showing sidebar', sidebarShown);
  }, [setSidebarShown]);

  const hideSidebar = useCallback(() => {
    setSidebarShown(false);
    // console.log('hiding sidebar', sidebarShown);
  }, [setSidebarShown]);

  return (
    <SidebarContext.Provider
      value={{
        sidebarShown,
        showSidebar,
        hideSidebar,
      }}
    >
      {props.children}
    </SidebarContext.Provider>
  );
}

export default SidebarProvider;