import React from 'react';
import cx from 'classnames';
import { useAppContext } from '../../app/appContext';
import { filterByAccess } from '../../utils';
import { MainNavFooter } from './mainNavFooter';
import { MainNavHeader } from './mainNavHeader';
import { MainNavLink } from './mainNavLink';
import { MainNavSection } from './mainNavSection';
import { MainNavToggle } from './mainNavToggle';
import { filterNavSections } from './utils';
import type { MainNavOptions } from '../../types';

export const CLASSNAME = 'MainNav';

export interface MainNavProps<AppData = unknown> extends MainNavOptions<AppData> {
    loading?: boolean;
}

/**
 * MainNav component is core to every Suite app. It shows the first level of navigation of each app, as well as Suite wide functionalities such as cross app navigation, help & support features, and user's identity information.
 *
 * @type organism
 * @status live
 * @tags layout-structure, navigation
 *
 * @nested NavLink, NavSection
 */
export function MainNav<AppData>({
    title,
    sections = [],
    logo,
    beta,
    footer,
    enableIntercom,
    enableZendesk,
    enableAppSwitcher = true,
    loading = false,
}: MainNavProps<AppData>) {
    const context = useAppContext<AppData>();
    const filteredSections = filterNavSections(sections, context);

    const primarySections = filteredSections.filter((s) => s.type === 'primary');
    const secondarySections = filteredSections.filter((s) => s.type === 'secondary');

    const footerItems = filterByAccess(footer?.items ?? [], context);

    const [collapsed, setCollapsed] = React.useState(false);
    const toggleCollapse = () => setCollapsed(!collapsed);

    return (
        <nav className={cx(CLASSNAME, { collapsed })} data-testid={CLASSNAME}>
            <MainNavHeader logo={logo} title={title} beta={beta} asMainLink />

            <MainNavToggle onChange={toggleCollapse} collapsed={collapsed} />

            {/* <SubAccountSwitcher /> */}

            <div className={`${CLASSNAME}-menu-items`}>
                {primarySections.map((section) => (
                    <MainNavSection key={section.id} section={section} loading={loading} />
                ))}
            </div>

            {!!secondarySections.length && (
                <div className={`${CLASSNAME}-menu-items secondary`}>
                    {secondarySections.map((section) => (
                        <MainNavSection key={section.id} section={section} loading={loading} />
                    ))}
                </div>
            )}

            <MainNavFooter
                items={footerItems}
                enableIntercom={enableIntercom}
                enableZendesk={enableZendesk}
                enableAppSwitcher={enableAppSwitcher}
                loading={loading}
            />
        </nav>
    );
}

MainNav.NavLink = MainNavLink;
MainNav.NavSection = MainNavSection;