import clsx from "clsx";
import Warning from "../indicators/Warning";
import Admin from "../indicators/Admin";
import Tooltip from "./Tooltip";

interface AvatarProps {
  size: "small" | "medium" | "large";
  status?: "caution" | "admin";
  src?: string;
  name?: string;
}

export default function Avatar({ size, status, src, name }: AvatarProps) {
  return (
    <div
      className={clsx(
        "rounded-full text-white relative",
        size === "small" && "2xl:size-[2.222vw] size-8 button-s",
        size === "medium" && "2xl:size-[2.5vw] size-9 button-m",
        size === "large" && "2xl:size-[3.333vw] size-12 title-s"
      )}
    >
      {GetAvatarImage(src, name)}
      <div
        className={clsx(
          "absolute",
          size === "small" &&
            "2xl:bottom-[1.389vw] bottom-[5.556vw] 2xl:left-[1.389vw] left-[5.556vw]",
          size === "medium" &&
            "2xl:bottom-[1.667vw] bottom-[6.667vw] 2xl:left-[1.667vw] left-[6.667vw]",
          size === "large" &&
            "2xl:bottom-[2.5vw] bottom-[10vw] 2xl:left-[2.5vw] left-[10vw]"
        )}
      >
        {status === "caution" && (
          <Tooltip label="Проблема с соединением" position="top">
            <Warning type="caution" />
          </Tooltip>
        )}
        {status === "admin" && (
          <Tooltip label="Администратор" position="top">
            <Admin />
          </Tooltip>
        )}
      </div>
    </div>
  );
}

function GetAvatarImage(src?: string, name?: string) {
  // Aninymous avatar
  if (!src && !name) {
    return <img src="/img/popups/MessageUserPfp.png" alt="avatar" />;
  }

  // Name avatar
  if (name && !src) {
    const nameParts = name.split(" ");
    const firstLetter = nameParts[0][0].toUpperCase();
    const secondLetter =
      nameParts.length > 1
        ? nameParts[nameParts.length - 1][0].toUpperCase()
        : "";

    return (
      <div className="bg-[#7B60F3] size-full rounded-full flex items-center justify-center">
        <span className="">
          {firstLetter}
          {secondLetter}
        </span>
      </div>
    );
  }

  // Src avatar
  return <img src={src} alt="avatar" />;
}
