import React, { useEffect, useRef } from 'react';
import clsx from 'clsx';
import {useThemeConfig} from '@docusaurus/theme-common';
import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
import Content from '@theme/DocSidebar/Desktop/Content';
import styles from './styles.module.css';
import useIsBrowser from '@docusaurus/useIsBrowser';
import AnnouncementBar from '@theme/AnnouncementBar';
import {useLocation} from '@docusaurus/router';

function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
  const {
    navbar: {hideOnScroll},
    docs: {
      sidebar: {hideable},
    },
  } = useThemeConfig();
  const isBrowser = useIsBrowser()
  const sidebarRef = useRef(null)
  const location = useLocation();

  useEffect(() => {
    if (isBrowser && sidebarRef.current) {
      function handleScroll () {
        if (!sidebarRef.current?.classList.contains('scrolling')) {
          sidebarRef.current?.classList.add('scrolling');
          const intervalId = setInterval(() => {
            if (!sidebarRef.current?.matches(':hover')) {
              sidebarRef.current?.classList.remove('scrolling');
              clearInterval(intervalId);
            }
          }, 300)
        }
      }

      const navElement = sidebarRef.current.querySelector('.main-sidebar');
      navElement.addEventListener('scroll', handleScroll);

      return () => {
        navElement?.removeEventListener('scroll', handleScroll);
      }
    }
  }, [isBrowser, sidebarRef.current])

  useEffect(() => {
    const navElement = sidebarRef.current.querySelector('.main-sidebar'),
      navElementBoundingRect = navElement.getBoundingClientRect();

    //logic to scroll to current active item
    const activeItem = document.querySelector('.sidebar-desktop [aria-current=page]'),
      activeItemBoundingReact = activeItem?.getBoundingClientRect(),
      //the extra 160 is due to the sticky elements in the sidebar
      isActiveItemVisible = activeItemBoundingReact.top >= 0 && activeItemBoundingReact.bottom + 160 <= navElementBoundingRect.height

    // alert(isActiveItemVisible);
    
    if (activeItem && !isActiveItemVisible) {
      //check if it has a parent list item element
      // let parentListItem = activeItem.parentElement

      //search only to reach the main sidebar element
      // while (parentListItem && !parentListItem.classList.contains('sidebar-desktop')) {
      //   if (parentListItem.classList.contains('menu__list-item')) {
      //     break;
      //   }

      //   parentListItem = parentListItem.parentElement
      // }

      const elementToScrollTo = activeItem,
        elementBounding = elementToScrollTo.getBoundingClientRect()
      //scroll to element
      navElement.scroll({
        //the extra 160 is due to the sticky elements in the sidebar
        top: elementBounding.top - navElementBoundingRect.top + navElement.scrollTop - 160,
        behaviour: 'smooth'
      })
    }
  }, [location])

  return (
    <div
      className={clsx(
        styles.sidebar,
        'sidebar-desktop',
        hideOnScroll && styles.sidebarWithHideableNavbar,
        isHidden && styles.sidebarHidden,
      )}
      ref={sidebarRef}>
      <AnnouncementBar />
      <Content path={path} sidebar={sidebar} className="main-sidebar" />
      {hideable && <CollapseButton onClick={onCollapse} />}
    </div>
  );
}
export default React.memo(DocSidebarDesktop);