import { memo, useRef } from 'react';
import dynamic from 'next/dynamic';

import useFetchSessionUser from '~/src/hooks/useFetchSessionUser';
import useKeyboard from '~/src/hooks/useKeyboard';
import Loading from '../Loading';

const BASE_FONT_SIZE = '1.04rem';

const OrchardSideNavDynamic = dynamic(() => import('./OrchardSideNav'), {
  ssr: false,
});

const SideNav = memo<{
  onCloseClick: () => void;
  onItemClick: () => void;
  isVisible: boolean;
}>(({ isVisible, onCloseClick, onItemClick }) => {
  const rootElRef = useRef<HTMLElement>(null);
  const { userIsLoading, user } = useFetchSessionUser();

  useKeyboard({
    active: isVisible,
    rootElRef,
    restoreFocusOnEscape: true,
    onEscape: onCloseClick,
  });

  return (
    <aside
      ref={rootElRef}
      data-testid="sideNav"
      style={{
        background: '#000',
        color: '#fff',
        height: '100%',
        boxShadow: '0.1em 0px 1em rgba(0, 0, 0, 0.1)',
        userSelect: 'none',
        verticalAlign: 'middle',
        fontSize: BASE_FONT_SIZE,
        position: 'relative',
      }}
    >
      {userIsLoading && (
        <Loading coverParent style={{ background: '#000' }} zIndex={1} />
      )}
      <div
        style={{
          height: '100%',
          opacity: userIsLoading ? 0.5 : 1,
          pointerEvents: userIsLoading ? 'none' : undefined,
        }}
      >
        {user && (
          <OrchardSideNavDynamic
            isVisible={isVisible}
            onCloseClick={onCloseClick}
            onItemClick={onItemClick}
            user={user}
          />
        )}
      </div>
    </aside>
  );
});

export default SideNav;