import { forwardRef, useRef } from 'react';
import { CSSTransition } from 'react-transition-group';

import { assertEmptyObject } from '../../../../utils/assertEmptyObject';
import { useNavigationBarContext } from '../../contexts/NavigationBarContext';

import { StyledPanel, animationDuration } from './styled';

/** Props for {@link NavigationBarPanel} */
export interface NavigationPanelProps {}

export const NavigationBarPanel = forwardRef<HTMLDivElement, NavigationPanelProps>((props, forwardedRef) => {
  const { ...restProps } = props;
  assertEmptyObject(restProps);

  const { currentList } = useNavigationBarContext();
  const transitionRef = useRef<HTMLDivElement>(null);

  return (
    <CSSTransition in={currentList !== null} nodeRef={transitionRef} timeout={animationDuration}>
      <StyledPanel ref={transitionRef}>
        <div ref={forwardedRef}></div>
      </StyledPanel>
    </CSSTransition>
  );
});