"use client";

import * as React from "react";

import { cva, type VariantProps } from "class-variance-authority";

import * as AvatarPrimitive from "@radix-ui/react-avatar";

import { cn } from "../../lib/utils";

export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
  layout?: "default" | "vertical";
}

const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
  ({ layout = "default", className, ...props }, ref) => (
    <AvatarPrimitive.Root
      ref={ref}
      className={
        layout === "default"
          ? cn("flex justify-center items-center gap-x-3", className)
          : cn("flex flex-col justify-center items-center gap-y-3", className)
      }
      {...props}
    />
  )
);
Avatar.displayName = AvatarPrimitive.Root.displayName;

const avatarImageVariants = cva(
  ["relative", "bg-grayscale-surface", "flex", "shrink-0", "overflow-hidden"],
  {
    variants: {
      variant: {
        default: "rounded-full",
        square: "rounded-xl",
      },
      border: {
        default: "",
        active: ["border-[1.5px]", "border-white"],
      },
      status: {
        default: "",
        active: ["ring-offset-2", "ring-4", "ring-primary-500"],
      },
      size: {
        xs: ["h-5", "w-5"],
        sm: ["h-6", "w-6"],
        md: ["h-8", "w-8"],
        lg: ["h-10", "w-10"],
        xl: ["h-14", "w-14"],
        xxl: ["h-16", "w-16"],
      },
    },
    defaultVariants: {
      variant: "default",
      border: "default",
      status: "default",
      size: "md",
    },
  }
);

const avatarFallbackVariants = cva(
  "font-medium text-grayscale-textIcon-title flex items-center justify-center w-full h-full bg-primary-surface",
  {
    variants: {
      size: {
        xs: ["font-[0.5rem]", "leading-[1.25rem]"],
        sm: ["font-[0.625rem]", "leading-[1.25rem]"],
        md: ["font-[0.75rem]", "leading-[1.125rem]"],
        lg: ["font-[0.75rem]", "leading-[1.125rem]"],
        xl: ["font-[0.875rem]", "leading-[1.375rem]"],
        xxl: ["font-[1rem]", "leading-[1.625rem]"],
      },
    },
    defaultVariants: {
      size: "md",
    },
  }
);

export interface AvatarImageProps
  extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "variant">,
    VariantProps<typeof avatarImageVariants> {
  fallback?: string;
}

const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(
  (
    { variant, border, status, size, fallback = "FB", className, ...props },
    ref
  ) => (
    <div
      className={cn(
        avatarImageVariants({ variant, border, status, size }),
        className
      )}
    >
      <AvatarPrimitive.Image
        ref={ref}
        className="object-cover w-full h-full aspect-square"
        {...props}
      />
      <AvatarFallback size={size}>{fallback}</AvatarFallback>
    </div>
  )
);
AvatarImage.displayName = AvatarPrimitive.Image.displayName;

export interface AvatarFallbackProps
  extends React.HTMLAttributes<HTMLDivElement> {
  size?: VariantProps<typeof avatarFallbackVariants>["size"];
}

const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
  ({ size, className, ...props }, ref) => (
    <AvatarPrimitive.Fallback
      ref={ref}
      className={cn(avatarFallbackVariants({ size }), className)}
      {...props}
    />
  )
);
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;

const AvatarDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col items-stretch justify-center", className)}
    {...props}
  />
));
AvatarDescription.displayName = "AvatarDescription";

const AvatarTitle = React.forwardRef<
  HTMLHeadingElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h6
    ref={ref}
    className={cn(
      "font-medium text-sm leading-6 text-grayscale-textIcon-body",
      className
    )}
    {...props}
  />
));
AvatarTitle.displayName = "AvatarTitle";

const AvatarStatus = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-xs leading-[18px] text-grayscale-textIcon-subtitle",
      className
    )}
    {...props}
  />
));
AvatarStatus.displayName = "AvatarStatus";

export {
  Avatar,
  AvatarDescription,
  AvatarFallback,
  AvatarImage,
  AvatarStatus,
  AvatarTitle,
};
Components

Bruno Aller
