import { forwardRef } from 'react';
import { IconArrowDown } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { Badge, Button } from '../../../baseComp';
import classes from './UnreadNotification.module.scss';

interface UnreadNotificationProps {
  unreadCount?: number;
  onClick?: () => void;
  className?: string | undefined;
  forceVisible?: boolean;
  title?: string;
}

const UnreadNotification = forwardRef<HTMLDivElement, UnreadNotificationProps>((props, ref) => {
  const {
    unreadCount = 0,
    onClick,
    className,
    forceVisible = false,
    title,
  } = props;
  const isVisible = forceVisible || unreadCount > 0;

  if (forceVisible && unreadCount <= 0) {
    return (
      <div ref={ref} className={cs(className)}>
        <Button className={classes['badge-button']} onClick={onClick} title={title}>
          <IconArrowDown
            className={classes['badge-button__icon']}
          />
        </Button>
      </div>
    );
  }

  // Wrap Badge in a positioning div so that the external className (which may carry
  // position:absolute for overlay placement) does not override Badge's own
  // position:relative that badge-content absolutely-positions against.
  return (
    <div ref={ref} className={cs(className)}>
      <Badge
        invisible={!isVisible}
        badgeClassName={cs(
          classes['badge-content'],
          {
            [classes['unread-notification-badge--invisible']]: !isVisible,
          },
        )}
        badgeContent={unreadCount}
      >
        <Button className={classes['badge-button']} onClick={onClick} title={title}>
          <IconArrowDown
            className={classes['badge-button__icon']}
          />
        </Button>
      </Badge>
    </div>
  );
});

UnreadNotification.displayName = 'UnreadNotification';

export { UnreadNotification };
export type { UnreadNotificationProps };