import React from "react";

import { twJoin } from "tailwind-merge";
import { Avatar } from "../avatar/Avatar";
import { Tooltip } from "../tooltip/Tooltip";
import type { AvatarProps } from "../avatar/Avatar";
import type { TooltipProps } from "../tooltip/Tooltip";

export interface UserAvatarProps extends AvatarProps {
  tooltip?: string;
  secondaryTooltip?: string;
  tertiaryTooltip?: string;
  tooltipProps?: Partial<TooltipProps>;
  online?: boolean;
  opacity?: number;
  /**
   * Whether this element should be excluded from the accessibility tree.
   *
   * Use only when you provide accessibility information higher up the tree!
   */
  presentation?: boolean;
}

export const UserAvatar = ({
  tooltip,
  secondaryTooltip,
  tertiaryTooltip,
  tooltipProps = {},
  online = false,
  opacity = undefined,
  presentation = false,
  name,
  ...avatarProps
}: UserAvatarProps) => {
  const userComponent = (
    <div
      className={twJoin(
        "rounded-full bg-N0 shadow-S100",
        online ? "opacity-100" : "opacity-30"
      )}
      style={{ opacity }}
      role={presentation ? "presentation" : "img"}
      aria-label={
        [tooltip, secondaryTooltip, tertiaryTooltip]
          .filter(Boolean)
          .join(", ") || name
      }
    >
      <div className="rounded-full">
        <Avatar presentation name={name} {...avatarProps} />
      </div>
    </div>
  );

  if (tooltip) {
    return (
      <Tooltip
        tooltip={tooltip}
        secondaryTooltip={secondaryTooltip}
        tertiaryTooltip={tertiaryTooltip}
        {...tooltipProps}
      >
        {userComponent}
      </Tooltip>
    );
  }

  return userComponent;
};
