import { ReactNode } 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 { StyledImage, StyledImageWrapper, StyledLinkWrapper } from './styled';

/** Props for {@link NavigationBarLogo} */
export interface NavigationBarLogoProps extends Omit<CommonProps, 'ariaDescribedBy'> {
  /** Tooltip */
  label: ReactNode;
  /** Url that will be opened when link is clicked */
  to: string;
  /** Image path */
  src: string;
}

/**
 * Predefined component to creating {@link NavigationBar} logo
 */
export function NavigationBarLogo(props: NavigationBarLogoProps) {
  const { to, src, testId, label, className, ...restProps } = props;
  assertEmptyObject(restProps);

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

  return (
    <StyledLinkWrapper className={className} {...{ [testIdAttribute]: testId }}>
      <Tooltip position={TooltipPosition.Right} text={label}>
        <Link to={to}>
          <StyledImageWrapper>
            <StyledImage src={src} />
          </StyledImageWrapper>
        </Link>
      </Tooltip>
    </StyledLinkWrapper>
  );
}