import { tv, VariantProps } from "../../utils"
import { AVATAR_BADGE_DEFAULT_SIZE } from "./AvatarBadge"

export const avatarBadgeVariants = tv({
  base: "absolute overflow-hidden bg-bg-additional-3",
  variants: {
    size: {
      xs: "bottom-[-3px] right-[-3px] size-3 rounded-[3px] p-[1.5px]",
      sm: "bottom-[-3px] right-[-3px] size-4 rounded p-[2.5px]",
      md: "-bottom-1 -right-1 size-[18px] translate-x-px translate-y-px rounded-[4.5px] p-[2.5px]",
    },
    tint: {
      true: "bg-transparent",
    },
  },
})

export type AvatarBadgeSize = Exclude<
  VariantProps<typeof avatarBadgeVariants>["size"],
  undefined
>

export function generateAvatarBadgeClipPath(
  avatarSize = 48,
  badgeSize: AvatarBadgeSize = AVATAR_BADGE_DEFAULT_SIZE,
) {
  const header = ["M 0 0", `H ${avatarSize}`]
  const footer = [`L 0 ${avatarSize}`, "Z"]

  switch (badgeSize) {
    case "xs":
      return [
        ...header,
        `V ${avatarSize - 11}`,
        "h -6",
        "c -2.7614 0 -5 2.2386 -5 5",
        "v 6.001",
        ...footer,
      ].join(" ")
    case "sm": {
      return [
        ...header,
        `V ${avatarSize - 15}`,
        "l 0.0008 0.0831",
        "c -0.3255 -0.0547 -0.6598 -0.0831 -1.0008 -0.0831",
        "l -8 0",
        "c -3.3137 0 -6 2.6863 -6 6",
        "l 0 8",
        "c 0 0.341 0.0284 0.6753 0.0831 1.0008",
        ...footer,
      ].join(" ")
    }
    case "md":
      return [
        ...header,
        `V ${avatarSize - 15}`,
        "h -8.5",
        "c -3.5118 0 -6.3732 2.785 -6.4959 6.2669",
        "l -0.0041 0.2331",
        "v 8.5",
        ...footer,
      ].join(" ")
  }
}