import { type ComponentPropsWithoutRef, type ElementType, type ReactElement, type ReactNode } from 'react';
import { type BaseMainNavigationSlotRecipeVariant } from '../../styled-system/recipes';
/**
 * The basic menu item type.
 * This is used for the menu item with no children, or the children of the nested menu item.
 */
type BasicNavigationItem = {
    /**
     * The label of the navigation item.
     */
    label: string;
    /**
     * The URL of the navigation item.
     */
    href: string;
    /**
     * The icon of the navigation item.
     */
    icon?: ReactElement;
    /**
     * Whether the navigation item is the current page.
     *
     * If this property is set to true, the navigation item is highlighted as the current page.
     * When the navigation item is the nested navigation item, the parent navigation is opened by default.
     */
    isCurrent?: boolean;
    /**
     * Nested navigation items.
     *
     * This property is not allowed for the non-nested navigation items.
     */
    children?: undefined;
    /**
     * Whether the navigation item is an external link.
     */
    isExternal?: boolean;
    /**
     * For a status icon or badge that is displayed on the right side when navigation is expanded.
     * This slot is only visible in the expanded state, not when collapsed.
     * If `locked` prop is true, any indicators in this slot will be ignored.
     *
     * **EXPERIMENTAL**: This property is experimental and may be changed or removed in the future.
     */
    statusSlot?: ReactNode;
    /**
     * Display a lock icon on the right side to indicate the navigation item is locked by permission.
     * This option does not actually disable the link.
     * This option is allowed only for the basic navigation items, not for the parent navigation items or children navigation items.
     *
     * @default false
     */
    locked?: boolean;
    /**
     * The properties for the lock icon.
     *
     * @property aria-label - The alternative text for the lock icon. It's set "ロックされています" by default.
     */
    lockIconProps?: Pick<ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
};
/**
 * The nested navigation parent item type.
 */
type ParentNavigationItem = {
    /**
     * The label of the navigation item.
     */
    label: string;
    /**
     * The URL of the navigation item.
     *
     * This property is not allowed for the parent navigation items.
     */
    href?: undefined;
    /**
     * The icon of the navigation item.
     */
    icon?: ReactElement;
    /**
     * Whether the navigation item is the current page.
     *
     * This property is not allowed for the parent navigation items.
     */
    isCurrent?: undefined;
    /**
     * Whether the nested navigation is open by default.
     * When set to true, the parent navigation item is expanded on initial render,
     * regardless of whether any child has `isCurrent: true`.
     *
     * @default false
     */
    isOpenByDefault?: boolean;
    /**
     * Nested navigation items.
     *
     * If this property is set, the navigation item is displayed as a summary element and the nested navigation items are displayed when the summary element is clicked.
     * The nested depth is limited to one level and the icon is only allowed for the first level navigation item.
     */
    children: Omit<BasicNavigationItem, 'icon' | 'children'>[];
    /**
     * Whether this navigation item is a group label.
     *
     * This property is not allowed for the parent navigation items.
     */
    isGroupLabel?: undefined;
    /**
     * Whether this navigation item belongs to the group menu section.
     *
     * When set to `true`, this item is rendered in a separate `<ul>` below the main navigation list,
     * visually separating it from the primary navigation items.
     *
     * @default false
     */
    isGroupMenu?: true;
};
/**
 * The group label navigation item type.
 * Used for displaying a label that groups child navigation items that are always visible.
 * Commonly used for important menus that need to be constantly displayed or menus with display toggle functionality.
 *
 * Example: Administrator Menu (menu only visible to users with admin privileges)
 */
type GroupLabelNavigationItem = {
    /**
     * The label of the group.
     */
    label: string;
    /**
     * The URL of the navigation item.
     *
     * This property is not allowed for the group label navigation items.
     */
    href?: undefined;
    /**
     * The icon of the navigation item.
     *
     * This property is not allowed for the group label navigation items.
     */
    icon?: undefined;
    /**
     * Whether the navigation item is the current page.
     *
     * This property is not allowed for the group label navigation items.
     */
    isCurrent?: undefined;
    /**
     * Nested navigation items under the group label.
     *
     * These items are always visible and cannot be toggled.
     */
    children: Omit<BasicNavigationItem, 'children'>[];
    /**
     * Indicates that this navigation item is a group label.
     * Group labels are always expanded and cannot be collapsed.
     */
    isGroupLabel: true;
};
type NavigationItem = BasicNavigationItem | ParentNavigationItem | GroupLabelNavigationItem;
type FeatureShortcut = {
    /**
     * The label of the feature shortcut link button.
     */
    label: string;
    /**
     * The URL of the feature shortcut link button.
     */
    href: string;
    /**
     * Whether the feature shortcut link button is an external link.
     */
    isExternal?: boolean;
};
export type MainNavigationProps = {
    /**
     * Additional class names to apply to the component.
     */
    className?: string;
    /**
     * The properties for the feature shortcut link button.
     *
     * If this property is set, the feature shortcut link button is displayed at the top of the navigation.
     */
    featureShortcut?: FeatureShortcut;
    /**
     * The navigation items.
     */
    navigationItems: NavigationItem[];
    /**
     * Whether the navigation is collapsible.
     *
     * If this property is set to `true`, the toggle button is displayed at the bottom of the navigation.
     * Cannot be used with feature shortcut or nested navigation.
     *
     * @default false
     */
    enableCollapsible?: boolean;
    /**
     * The width of the navigation.
     *
     * If this property is set to 'normal', the navigation width will be the width of the navigation item to fit the icon and 8 full-width characters.
     * When this property is set to 'narrow', the navigation width will be the width of the navigation item to fit the icon and 11 full-width characters.
     *
     * @default 'normal'
     */
    width?: BaseMainNavigationSlotRecipeVariant['width'];
    /**
     * The component to use as the navigation link instead of the general anchor element `<a>`.
     * The custom component must extend the HTMLAnchorElement interface.
     *
     * If this property is not set, the navigation link is rendered as an general anchor element `<a>`.
     *
     * If this property is set, it depends on the `isExternal` property of each navigation item.
     * If the `isExternal` property is set to true, the navigation link is rendered as an general anchor element `<a>` with `target="_blank"`.
     * If the `isExternal` property is set to false, the navigation link is rendered as the custom component.
     *
     * Use this property if you want to use a custom component as the navigation link.
     * e.g. next/link
     */
    customLinkComponent?: ElementType;
    /**
     * Whether to disable the responsive behavior.
     *
     * If this property is set to `true`, the navigation will not be collapsible on narrow viewports.
     *
     * @default false
     */
    disableResponsive?: BaseMainNavigationSlotRecipeVariant['disableResponsive'];
    /**
     * The collapsed state of the navigation (controlled).
     * When this prop is provided, the component behaves as a controlled component.
     * This prop is only effective when `enableCollapsible` is `true`.
     */
    isCollapsed?: boolean;
    /**
     * Callback function called when the collapsed state changes.
     * This is triggered when the toggle button is clicked.
     * This callback is only called when `enableCollapsible` is `true`.
     */
    onCollapsedChange?: (isCollapsed: boolean) => void;
};
/**
 * The ref object for the main navigation.
 *
 * This object has a method to open/close the main navigation.
 * It is used for the narrow viewport main navigation.
 */
export type MainNavigationRef = {
    openMainNavigation: () => void;
    closeMainNavigation: () => void;
};
export type NarrowViewportMainNavigationProps = Omit<MainNavigationProps, 'enableCollapsible'>;
export {};