import type { FC } from 'react';
import React from 'react';
import { Nav } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-i18n';
import { createHref } from '@theorchard/suite-utils';
import cx from 'classnames';
import { NavLink } from 'react-router-dom';
import { useAppContext } from '../../../app/appContext';
import { filterByAccess, getRoutes } from '../../../utils';

interface PageModuleNavItem {
    routeId: string;
    label: string;
}

interface PageModuleNavProps {
    items: PageModuleNavItem[];
}

interface VisibleNavItem extends PageModuleNavItem {
    url: string;
}

const CLASSNAME = 'PageNav PageModuleNav';

/**
 * Renders a page nav component with links to named module routes.
 * Only routes that the current identity has access to are rendered.
 *
 * @experimental This component might be changed or removed in a future update. Do not use in production.
 */
export const PageModuleNav: FC<PageModuleNavProps> = ({ items }) => {
    const context = useAppContext();

    const childRoutes = getRoutes();
    const visibleRoutes = filterByAccess(childRoutes, context);

    const visibleItems = items
        .map((item) => {
            const childRoute = visibleRoutes.find((route) => route.id === item.routeId);

            if (!childRoute) return null;

            return {
                ...item,
                url: createHref(childRoute.path),
            };
        })
        .filter((item): item is VisibleNavItem => !!item);

    return (
        <div className={cx(CLASSNAME, 'd-print-none')}>
            <Nav variant="tabs">
                {visibleItems.map((item) => (
                    <Nav.Item key={item.routeId} data-testid={`NavItem-${item.routeId}`}>
                        <NavLink exact className="nav-link" to={item.url}>
                            {formatMessage(item.label)}
                        </NavLink>
                    </Nav.Item>
                ))}
            </Nav>
        </div>
    );
};