import React, { useRef } from 'react';
import { Scroll } from 'folds';

import {
  Sidebar,
  SidebarContent,
  SidebarStackSeparator,
  SidebarStack,
} from '../../components/sidebar';
import {
  DirectTab,
  HomeTab,
  SpaceTabs,
  ExploreTab,
  SettingsTab,
  UnverifiedTab,
  SearchTab,
} from './sidebar';
import { CreateTab } from './sidebar/CreateTab';
import { HiddenSpacesTabs } from './sidebar/SpaceTabs';
import { useHomeHidden } from '../../hooks/useSidebarItems';
import { PluginSidebarSlot } from '../../features/settings/plugins/PluginSidebarSlot';

export function SidebarNav() {
  const scrollRef = useRef<HTMLDivElement>(null);
  const [homeHidden] = useHomeHidden();

  return (
    <Sidebar>
      <SidebarContent
        scrollable={
          <Scroll
            ref={scrollRef}
            variant="Background"
            size="0"
            data-sidebar-scroll=""
            style={{
              marginRight: -25,
              paddingRight: 25,
              width: 'calc(100% + 25px)',
              boxSizing: 'border-box',
              overflowX: 'hidden',
              overflowY: 'auto',
            }}
          >
            <SidebarStack>
              {!homeHidden && <HomeTab />}
              <DirectTab />
            </SidebarStack>
            <SpaceTabs scrollRef={scrollRef} />
            <SidebarStackSeparator />
            <SidebarStack>
              <PluginSidebarSlot location="sidebar-actions" />
              <ExploreTab />
              <CreateTab />
            </SidebarStack>
            <HiddenSpacesTabs />
          </Scroll>
        }
        sticky={
          <>
            <SidebarStackSeparator />
            <SidebarStack>
              <PluginSidebarSlot location="sidebar-actions" />
              <SearchTab />
              <UnverifiedTab />
              <SettingsTab />
            </SidebarStack>
          </>
        }
      />
    </Sidebar>
  );
}
