import { ReactNode, useCallback, useState } from 'react';

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

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

/** Props for {@link NavigationBarItem} */
export interface NavigationBarItemProps extends Omit<CommonProps, 'ariaDescribedBy'> {
  /** Url that will be opened when link is clicked */
  to: string;
  /** Tooltip text */
  title: ReactNode;
  /** Item component */
  label: ReactNode | ((props: { active: boolean; hover: boolean }) => ReactNode);
  /** If `true`, the item will be designed as active */
  active?: boolean;
}

/**
 * {@link NavigationBar} item
 */
export function NavigationBarItem(props: NavigationBarItemProps) {
  /* istanbul ignore next */
  const { label, title, to, active = false, testId, className, ...restProps } = props;
  assertEmptyObject(restProps);

  const Link = useLinkComponent();

  const [hover, setHover] = useState(false);

  const handleMouseEnter = useCallback(() => {
    setHover(true);
  }, [setHover]);

  const handleMouseLeave = useCallback(() => {
    setHover(false);
  }, [setHover]);

  const testIdAttribute = useTestIdAttribute();

  return (
    <StyledLinkWrapper className={className} {...{ [testIdAttribute]: testId }}>
      <Tooltip activateByFocus position={TooltipPosition.Right} text={title}>
        <Link
          aria-current={active ? 'page' : false}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
          role="menuitem"
          to={to}
        >
          <StyledItem $active={active} $hover={hover}>
            {typeof label === 'function' ? label({ active, hover }) : /* istanbul ignore next */ label}
          </StyledItem>
        </Link>
      </Tooltip>
    </StyledLinkWrapper>
  );
}