import { ReactNode } from 'react';

import { useLinkComponent } from '../../../../core/hooks/useLinkComponent';
import { useTestIdAttribute } from '../../../../hooks/useTestIdAttribute';
import { CommonProps } from '../../../../types';
import { assertEmptyObject } from '../../../../utils/assertEmptyObject';

import { StyledLabel, StyledLinkWrapper } from './styled';

/** Props for {@link NavigationBarListItem} */
export interface NavigationBarListItemProps extends CommonProps {
  /** Link text */
  label: ReactNode;
  /** Url that will be opened when link is clicked */
  to: string;
  /** If `true`, the item will be designed as active */
  active?: boolean;
}

/**
 * {@link NavigationBarList} item
 */
export function NavigationBarListItem(props: NavigationBarListItemProps) {
  /* istanbul ignore next */
  const { label, to, active = false, testId, ariaDescribedBy, className, ...restProps } = props;
  assertEmptyObject(restProps);

  const Link = useLinkComponent();
  const testIdAttribute = useTestIdAttribute();

  return (
    <StyledLinkWrapper
      $active={active}
      aria-describedby={ariaDescribedBy}
      className={className}
      {...{ [testIdAttribute]: testId }}
    >
      <Link aria-current={active ? 'page' : false} role="menuitem" to={to}>
        <StyledLabel $active={active}>{label}</StyledLabel>
      </Link>
    </StyledLinkWrapper>
  );
}