import React, { useContext } from 'react';
import Link from '@theme/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import NavbarItem from '@theme/NavbarItem'; // retrocompatible with v1
import AnnounceBar from '@theme/AnnounceBar';
import { SidebarToggle } from '@theme/DocSidebar';
import SidebarContext from '@theme/_contexts/SidebarContext';

import RasaDocsLogo from './_assets/rasa-docs-logo.svg';

const DefaultNavItemPosition = 'right';
function splitNavItemsByPosition(items) {
  const leftItems = items.filter(
    (item) => item.label !== 'Versions' && (item.position ?? DefaultNavItemPosition) === 'left',
  );
  const rightItems = items.filter(
    (item) => item.label !== 'Versions' && (item.position ?? DefaultNavItemPosition) === 'right',
  );
  return {
    leftItems,
    rightItems,
  };
}

function TopNavbar() {
  const {
    siteConfig: {
      themeConfig: { navbar: { items = [] } = {} },
    },
  } = useDocusaurusContext();

  const { sidebarShown, showSidebar, hideSidebar } = useContext(SidebarContext);

  const { leftItems, rightItems } = splitNavItemsByPosition(items);

  return (
    <>
      <AnnounceBar />
      <header className="top-navbar">
        <nav className="navbar">
          <div className="navbar-inner wrap-last frame">
            <div className="navbar__items">
              {items != null && items.length !== 0 && (
                <SidebarToggle onToggle={sidebarShown ? hideSidebar : showSidebar} />
              )}
              <Link className="navbar__brand" to="https://rasa.com/docs/">
                <RasaDocsLogo />
              </Link>
              {leftItems.map((item, i) => (
                <NavbarItem {...item} key={i} />
              ))}
            </div>
            <div className="navbar__items navbar__items--right">
              {rightItems.map((item, i) => (
                <NavbarItem {...item} key={i} />
              ))}
            </div>
          </div>
        </nav>
      </header>
    </>
  );
}

export default TopNavbar;