import { MembersPropertyIcon } from "@buzzwaretech/propel/icons";
import type { LucideIcon } from "lucide-react";
import { observer } from "mobx-react";
// buzzwareTech ui
import { Avatar, AvatarGroup } from "@buzzwaretech/ui";
import { cn, getFileURL } from "@buzzwaretech/utils";
// buzzwareTech utils
// helpers
// hooks
import { useMember } from "@/hooks/store/use-member";

type AvatarProps = {
  showTooltip: boolean;
  userIds: string | string[] | null;
  icon?: LucideIcon;
  size?: "sm" | "md" | "base" | "lg" | number;
};

export const ButtonAvatars = observer(function ButtonAvatars(
  props: AvatarProps,
) {
  const { showTooltip, userIds, icon: Icon, size = "md" } = props;
  // store hooks
  const { getUserDetails } = useMember();

  if (Array.isArray(userIds)) {
    if (userIds.length > 0)
      return (
        <AvatarGroup size={size} showTooltip={!showTooltip}>
          {userIds.map((userId) => {
            const userDetails = getUserDetails(userId);

            if (!userDetails) return;
            return (
              <Avatar
                key={userId}
                src={getFileURL(userDetails.avatar_url)}
                name={userDetails.display_name}
              />
            );
          })}
        </AvatarGroup>
      );
  } else {
    if (userIds) {
      const userDetails = getUserDetails(userIds);
      return (
        <Avatar
          src={getFileURL(userDetails?.avatar_url ?? "")}
          name={userDetails?.display_name}
          size={size}
          showTooltip={!showTooltip}
        />
      );
    }
  }

  return Icon ? (
    <Icon className="h-3 w-3 flex-shrink-0" />
  ) : (
    <MembersPropertyIcon className={cn("mx-[4px] h-3 w-3 flex-shrink-0")} />
  );
});