Avatar

import { UserIcon } from "@phosphor-icons/react/dist/ssr";
import type { VariantProps } from "cva";
import { Children, cloneElement, isValidElement, useId } from "react";
import { cn, cva } from "@/lib/utils/classnames";

const getInitials = (name: string | undefined) => {
  if (!name) return "";

  if (name.length === 1 || name.length === 2) return name;

  return name
    .split(" ")
    .map((n) => n[0])
    .join("");
};

const avatarStyle = cva({
  base: "relative flex items-center justify-center overflow-hidden bg-foreground-secondary/10 font-semibold text-foreground/80 shadow-[inset_0_0_0_1px_--alpha(var(--color-foreground)/8%)] backdrop-blur-sm",
  variants: {
    variant: {
      circle: "rounded-full",
      square: "rounded-md",
    },
    size: {
      "2xs": "size-4 text-2xs",
      xs: "size-6 text-2xs",
      sm: "size-8 text-xs",
      md: "size-10 text-sm",
      lg: "size-12 text-base",
      xl: "size-14 text-lg",
      "2xl": "size-16 text-xl",
      "3xl": "size-20 text-3xl",
    },
  },
});

interface AvatarProps extends React.ComponentPropsWithRef<"div"> {
  size?: VariantProps<typeof avatarStyle>["size"];
  variant?: VariantProps<typeof avatarStyle>["variant"];
}

const Avatar = ({
  className,
  variant = "circle",
  size = "md",
  children,
  ...props
}: AvatarProps) => {
  return (
    <div className={cn(avatarStyle({ variant, size }), className)} {...props}>
      {children}
    </div>
  );
};

interface AvatarImageProps extends React.ComponentPropsWithRef<"img"> {
  src: string;
}

const AvatarImage = ({ className, src, ...props }: AvatarImageProps) => {
  return (
    <img
      className={cn("absolute inset-0 z-1 object-cover", className)}
      src={src}
      alt=""
      {...props}
    />
  );
};

interface AvatarFallbackProps extends React.ComponentPropsWithRef<"div"> {
  children?: string;
}

const AvatarFallback = ({ className, children, ...props }: AvatarFallbackProps) => {
  return (
    <div className={cn("opacity-80", className)} {...props}>
      {getInitials(children) || <UserIcon weight="bold" />}
    </div>
  );
};

// Tailwind spacing units for each Avatar size variant; `2xs` (size-4) is 4 spacing units, etc.
// Kept in sync with `avatarStyle.variants.size` via the `satisfies` constraint below.
const SIZE_MAP = {
  "2xs": 4,
  xs: 6,
  sm: 8,
  md: 10,
  lg: 12,
  xl: 14,
  "2xl": 16,
  "3xl": 20,
} as const satisfies Record<NonNullable<AvatarProps["size"]>, number>;

const OVERLAP_UNITS = 2;
const CUTOUT_GAP_UNITS = 1;
const SQUARE_RADIUS_UNITS = 1.5;

const toPathNumber = (value: number) => {
  return Number(value.toFixed(4));
};

const createCirclePath = ({ cx, cy, radius }: { cx: number; cy: number; radius: number }) => {
  const left = toPathNumber(cx - radius);
  const right = toPathNumber(cx + radius);
  const centerY = toPathNumber(cy);
  const pathRadius = toPathNumber(radius);

  return [
    `M ${left} ${centerY}`,
    `A ${pathRadius} ${pathRadius} 0 1 0 ${right} ${centerY}`,
    `A ${pathRadius} ${pathRadius} 0 1 0 ${left} ${centerY}`,
    "Z",
  ].join(" ");
};

const createRoundedRectPath = ({
  x,
  y,
  width,
  height,
  radius,
}: {
  x: number;
  y: number;
  width: number;
  height: number;
  radius: number;
}) => {
  const right = x + width;
  const bottom = y + height;
  const pathRadius = Math.min(radius, width / 2, height / 2);

  return [
    `M ${toPathNumber(x + pathRadius)} ${toPathNumber(y)}`,
    `H ${toPathNumber(right - pathRadius)}`,
    `A ${toPathNumber(pathRadius)} ${toPathNumber(pathRadius)} 0 0 1 ${toPathNumber(right)} ${toPathNumber(y + pathRadius)}`,
    `V ${toPathNumber(bottom - pathRadius)}`,
    `A ${toPathNumber(pathRadius)} ${toPathNumber(pathRadius)} 0 0 1 ${toPathNumber(right - pathRadius)} ${toPathNumber(bottom)}`,
    `H ${toPathNumber(x + pathRadius)}`,
    `A ${toPathNumber(pathRadius)} ${toPathNumber(pathRadius)} 0 0 1 ${toPathNumber(x)} ${toPathNumber(bottom - pathRadius)}`,
    `V ${toPathNumber(y + pathRadius)}`,
    `A ${toPathNumber(pathRadius)} ${toPathNumber(pathRadius)} 0 0 1 ${toPathNumber(x + pathRadius)} ${toPathNumber(y)}`,
    "Z",
  ].join(" ");
};

const createAvatarCutoutPath = ({
  previousVariant,
  previousSize,
  currentSize,
}: {
  previousVariant: NonNullable<AvatarProps["variant"]>;
  previousSize: NonNullable<AvatarProps["size"]>;
  currentSize: NonNullable<AvatarProps["size"]>;
}) => {
  const previousUnits = SIZE_MAP[previousSize];
  const currentUnits = SIZE_MAP[currentSize];
  const gap = CUTOUT_GAP_UNITS / currentUnits;
  const previousWidth = previousUnits / currentUnits;
  const previousCenterX = (OVERLAP_UNITS - previousUnits / 2) / currentUnits;
  const previousCenterY = 0.5;

  const cutout =
    previousVariant === "circle"
      ? createCirclePath({
          cx: previousCenterX,
          cy: previousCenterY,
          radius: previousWidth / 2 + gap,
        })
      : createRoundedRectPath({
          x: (OVERLAP_UNITS - previousUnits - CUTOUT_GAP_UNITS) / currentUnits,
          y: (currentUnits - previousUnits) / 2 / currentUnits - gap,
          width: (previousUnits + CUTOUT_GAP_UNITS * 2) / currentUnits,
          height: (previousUnits + CUTOUT_GAP_UNITS * 2) / currentUnits,
          radius: (SQUARE_RADIUS_UNITS + CUTOUT_GAP_UNITS) / currentUnits,
        });

  return `M 0 0 H 1 V 1 H 0 Z ${cutout}`;
};

const cloneAvatarForGroup = (child: React.ReactElement<AvatarProps>) => {
  return cloneElement(child, {
    className: cn(child.props.className, "backdrop-blur-none"),
  });
};

type AvatarGroupProps = React.ComponentPropsWithRef<"div">;

const AvatarGroup = ({ children, className, ...props }: AvatarGroupProps) => {
  const id = useId();
  const items = Children.toArray(children).filter(
    (child): child is React.ReactElement<AvatarProps> =>
      isValidElement(child) && child.type === Avatar,
  );

  return (
    <div
      className={cn(
        "isolate flex items-center -space-x-(--overlap) [--overlap:--spacing(2)]",
        className,
      )}
      {...props}
    >
      {items.map((child, i) => {
        const key = child.key ?? i;
        const previous = items[i - 1];

        if (!previous) return cloneAvatarForGroup(child);

        const clipPathId = `${id}-${i}`;
        const previousVariant = previous.props.variant ?? "circle";
        const previousSize = previous.props.size ?? "md";
        const currentSize = child.props.size ?? "md";
        const cutoutPath = createAvatarCutoutPath({
          currentSize,
          previousSize,
          previousVariant,
        });

        return (
          <div
            key={key}
            className="relative"
            style={{
              clipPath: `url(#${clipPathId})`,
              WebkitClipPath: `url(#${clipPathId})`,
            }}
          >
            <svg
              width="0"
              height="0"
              className="absolute size-0 overflow-hidden"
              aria-hidden="true"
              focusable="false"
            >
              <clipPath id={clipPathId} clipPathUnits="objectBoundingBox">
                <path clipRule="evenodd" fillRule="evenodd" d={cutoutPath} />
              </clipPath>
            </svg>

            {cloneAvatarForGroup(child)}
          </div>
        );
      })}
    </div>
  );
};

const CompoundAvatar = Object.assign(Avatar, {
  Image: AvatarImage,
  Fallback: AvatarFallback,
  Group: AvatarGroup,
});

export { CompoundAvatar as Avatar };