export * from '@digigov/react-core/NavListItemActionBase';
import React, { ForwardedRef } from 'react';
import {
  NavListItemButton,
  NavListItemButtonProps,
  NavListItemBadge,
  NavListItemActionContainer,
} from '@digigov/ui/navigation/NavList';
import {
  NavListItemLink,
  NavListItemLinkProps,
} from '@digigov/ui/navigation/NavList/NavListItemLink';

export type LinkButtonJoinProps = NavListItemLinkProps & NavListItemButtonProps;
export interface NavListItemActionBaseProps extends LinkButtonJoinProps {
  /**
   * label is optional.
   * The label for the NavListItemActionBase.
   */
  label?: string;

  /**
   * arrow is optional.
   * use arrow prop if you want to have arrow at the nav list item.
   * @value true
   * @value false
   * @default false
   */
  arrow?: boolean;
  badgeText?: string;
}
/**
 * NavListItemAction must be inside the NavList.
 * This component has a items of NavListItemLink component inside.
 */
export const NavListItemAction = React.forwardRef<
  HTMLButtonElement | HTMLAnchorElement,
  NavListItemActionBaseProps
>(function NavListItemAction(
  { label, arrow = false, href, className, children, ...props },
  ref
) {
  return (
    <NavListItemActionContainer>
      {href ? (
        <NavListItemLink
          {...props}
          href={href}
          className={className}
          ref={ref as ForwardedRef<HTMLAnchorElement>}
        >
          {children || label}
        </NavListItemLink>
      ) : (
        <NavListItemButton
          {...props}
          arrow={arrow}
          className={className}
          ref={ref as ForwardedRef<HTMLButtonElement>}
        >
          {children || label}
        </NavListItemButton>
      )}
      {props.badgeText && <NavListItemBadge text={props.badgeText} />}
    </NavListItemActionContainer>
  );
});

export default NavListItemAction;