import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"
import { LucideProps } from "lucide-react"

import { cn } from "../../design-lib/utils"

// Define type for different avatar sizes
type sizes = "sm" | "md" | "lg" | "xl" | "super"

// Define props for the main Avatar component
type AvatarProps = React.ComponentPropsWithoutRef<
  typeof AvatarPrimitive.Root
> & { size?: sizes }

// Define props for the AvatarImage component
type AvatarImageProps = React.ComponentPropsWithoutRef<
  typeof AvatarPrimitive.Image
>

// Define props for the AvatarWithIcon component
type AvatarWithIconProps = React.HTMLAttributes<HTMLDivElement> & {
  size?: sizes
  src: string
  alt?: string
  icon: (props: LucideProps) => JSX.Element
}

// Define CSS classes for different avatar sizes
const SIZE_CLASSES = {
  sm: "h-8 w-8",
  md: "h-10 w-10",
  lg: "h-12 w-12",
  xl: "h-14 w-14",
  super: "h-20 w-20",
  default: "h-10 w-10",
}

// Get CSS class for a given size
const getSize = (size?: sizes): string => SIZE_CLASSES[size || "default"]

// Main Avatar component
const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  AvatarProps
>(({ className, size, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn(
      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
      getSize(size),
      className
    )}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

// AvatarImage component
const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  AvatarImageProps
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    className={cn("aspect-square h-full w-full rounded-full border", className)}
    {...props}
  />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

// AvatarWithIcon component
const AvatarWithIcon = React.forwardRef<HTMLDivElement, AvatarWithIconProps>(
  ({ className, size, src, alt, icon: Icon, ...props }, ref) => (
    <div
      className={cn(
        "relative flex items-center justify-center",
        getSize(size),
        className
      )}
      ref={ref}
    >
      <div className="h-full w-full shrink-0 overflow-hidden rounded-full">
        <img
          className={cn(
            "aspect-square z-10 h-full w-full rounded-full border",
            getSize(size)
          )}
          src={src}
          srcSet={src}
          alt={alt}
          {...props}
        />
      </div>
      <div
        className={cn(
          "absolute -bottom-1 -right-1 flex h-7 w-7 items-center justify-center rounded-full border bg-primary text-white dark:bg-secondary"
        )}
      >
        <Icon className="h-3 w-3" />
      </div>
    </div>
  )
)
AvatarWithIcon.displayName = "AvatarWithIcon"

// AvatarGroup component
const AvatarGroup = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & {
    avatars: Array<{ src: string; alt?: string }>
    limit?: number
    size?: sizes
  }
>(({ className, avatars, limit, size, ...props }, ref) => {
  const avatarsToRender = avatars.slice(0, limit)
  const remainingAvatars = avatars.length - avatarsToRender.length
  return (
    <div
      className={cn(
        "flex w-fit items-center justify-center -space-x-[0.8rem]",
        className
      )}
      ref={ref}
    >
      {avatarsToRender.map((avatar, index) => (
        <div key={index} className="shrink-0 overflow-hidden rounded-full">
          <img
            className={cn(
              "aspect-square rounded-full border border-background",
              getSize(size)
            )}
            src={avatar.src}
            srcSet={avatar.src}
            alt={avatar.alt}
            {...props}
          />
        </div>
      ))}
      {remainingAvatars > 0 && (
        <AvatarPlaceHolder
          className={cn(
            "aspect-square border bg-primary dark:bg-secondary",
            getSize(size)
          )}
        >
          <p className="text-xs font-semibold text-background dark:text-foreground">
            +{remainingAvatars}
          </p>
        </AvatarPlaceHolder>
      )}
    </div>
  )
})
AvatarGroup.displayName = "AvatarGroup"

// AvatarFallback component
const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn(
      "aspect-square flex h-full w-full items-center justify-center rounded-full border",
      className
    )}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

// AvatarPlaceHolder component
const AvatarPlaceHolder = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
    size?: sizes
  }
>(({ className, size, ...props }, ref) => (
  <span
    ref={ref}
    className={cn(
      "flex items-center justify-center rounded-full border",
      getSize(size),
      className
    )}
    {...props}
  />
))
AvatarPlaceHolder.displayName = "AvatarPlaceHolder"

export {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarGroup,
  AvatarPlaceHolder,
  AvatarWithIcon,
}