Avatar

"use client"

import { useRender } from "@base-ui/react/use-render"
import { createContext, use } from "react"
import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
import * as stylex from "@stylexjs/stylex"
import type { StyleXStyles } from "@stylexjs/stylex"
import { clsx } from "clsx"

import { color, layer, leading, radius, space, text } from "@/theme/tokens.stylex"

type AvatarSize = "sm" | "default" | "lg"

const AvatarContext = createContext<{ size: AvatarSize } | null>(null)

const AvatarGroupContext = createContext<{ size: AvatarSize } | null>(null)

const styles = stylex.create({
  root: {
    position: "relative",
    display: "flex",
    flexShrink: 0,
    userSelect: "none",
    borderRadius: radius.full,
    "::after": {
      content: "''",
      position: "absolute",
      inset: 0,
      borderRadius: radius.full,
      borderWidth: 1,
      borderStyle: "solid",
      borderColor: `color-mix(in oklab, ${color.foreground} 10%, transparent)`,
    },
  },
  image: {
    aspectRatio: "1 / 1",
    width: "100%",
    height: "100%",
    objectFit: "cover",
    borderRadius: radius.full,
  },
  fallback: {
    display: "flex",
    width: "100%",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: radius.full,
    backgroundColor: color.muted,
    color: color.mutedForeground,
  },
  badge: {
    position: "absolute",
    insetInlineEnd: 0,
    insetBlockEnd: 0,
    zIndex: layer.raised,
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: radius.full,
    backgroundColor: color.primary,
    color: color.primaryForeground,
    boxShadow: `0 0 0 2px var(--carbon-avatar-cutout, ${color.background})`,
  },
  group: { display: "flex", alignItems: "center" },
  count: {
    position: "relative",
    display: "flex",
    flexShrink: 0,
    alignItems: "center",
    justifyContent: "center",
    userSelect: "none",
    borderRadius: radius.full,
    backgroundColor: color.muted,
    "--carbon-avatar-surface": `inset 0 0 0 1px color-mix(in oklab, ${color.foreground} 10%, transparent)`,
    boxShadow: "var(--carbon-avatar-surface)",
    color: color.mutedForeground,
  },
  member: {
    marginInlineStart: {
      default: `calc(-1 * ${space.s2})`,
      ":nth-child(1 of [data-slot])": 0,
    },
    boxShadow: `var(--carbon-avatar-surface, 0 0 ${color.transparent}), 0 0 0 2px var(--carbon-avatar-cutout, ${color.background})`,
  },
})

const sizes = stylex.create({
  sm: { width: space.s6, height: space.s6 },
  default: { width: space.s8, height: space.s8 },
  lg: { width: space.s10, height: space.s10 },
})

const fallbackSizes = stylex.create({
  sm: { fontSize: text.xs, lineHeight: leading.xs },
  default: { fontSize: text.sm, lineHeight: leading.sm },
  lg: { fontSize: text.sm, lineHeight: leading.sm },
})

const badgeSizes = stylex.create({
  sm: { width: space.s2, height: space.s2, "--carbon-icon-size": space.s0 },
  default: { width: space.s2_5, height: space.s2_5, "--carbon-icon-size": space.s2 },
  lg: { width: space.s3, height: space.s3, "--carbon-icon-size": space.s2 },
})

const countSizes = stylex.create({
  sm: {
    width: space.s6,
    height: space.s6,
    fontSize: text.xs,
    lineHeight: leading.xs,
    "--carbon-icon-size": space.s3,
  },
  default: {
    width: space.s8,
    height: space.s8,
    fontSize: text.sm,
    lineHeight: leading.sm,
    "--carbon-icon-size": space.s4,
  },
  lg: {
    width: space.s10,
    height: space.s10,
    fontSize: text.sm,
    lineHeight: leading.sm,
    "--carbon-icon-size": space.s5,
  },
})

const avatarStyles = {
  base: styles.root,
  sizes,
  image: styles.image,
  fallback: styles.fallback,
  fallbackSizes,
  badge: styles.badge,
  badgeSizes,
  group: styles.group,
  count: styles.count,
  countSizes,
  member: styles.member,
}

type Overrides = { xstyle?: StyleXStyles; className?: string }

type AvatarProps = Omit<AvatarPrimitive.Root.Props, "className"> & Overrides & { size?: AvatarSize }

function Avatar({ size, xstyle, className, ...props }: AvatarProps) {
  const group = use(AvatarGroupContext)
  const resolved = size ?? group?.size ?? "default"
  const sx = stylex.props(styles.root, sizes[resolved], group && styles.member, xstyle)

  return (
    <AvatarContext value={{ size: resolved }}>
      <AvatarPrimitive.Root
        data-slot="avatar"
        data-size={resolved}
        {...sx}
        {...props}
        className={clsx(sx.className, className)}
      />
    </AvatarContext>
  )
}

type AvatarImageProps = Omit<AvatarPrimitive.Image.Props, "className"> & Overrides

function AvatarImage({ xstyle, className, ...props }: AvatarImageProps) {
  const sx = stylex.props(styles.image, xstyle)
  return (
    <AvatarPrimitive.Image
      data-slot="avatar-image"
      {...sx}
      {...props}
      className={clsx(sx.className, className)}
    />
  )
}

type AvatarFallbackProps = Omit<AvatarPrimitive.Fallback.Props, "className"> & Overrides

function AvatarFallback({ xstyle, className, ...props }: AvatarFallbackProps) {
  const size = use(AvatarContext)?.size ?? "default"
  const sx = stylex.props(styles.fallback, fallbackSizes[size] ?? fallbackSizes.default, xstyle)

  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      {...sx}
      {...props}
      className={clsx(sx.className, className)}
    />
  )
}

function AvatarBadge({
  render,
  ref,
  style,
  xstyle,
  className,
  ...props
}: useRender.ComponentProps<"span"> & Overrides) {
  const size = use(AvatarContext)?.size ?? "default"
  const sx = stylex.props(styles.badge, badgeSizes[size] ?? badgeSizes.default, xstyle)

  return useRender({
    defaultTagName: "span",
    render,
    ref,
    props: {
      "data-slot": "avatar-badge",
      "data-size": size,
      ...sx,
      ...props,
      className: clsx("carbon-icons", sx.className, className),
      style: { ...sx.style, ...style },
    },
  })
}

type AvatarGroupProps = useRender.ComponentProps<"div"> & Overrides & { size?: AvatarSize }

function AvatarGroup({
  render,
  ref,
  style,
  size = "default",
  xstyle,
  className,
  ...props
}: AvatarGroupProps) {
  const sx = stylex.props(styles.group, xstyle)

  return (
    <AvatarGroupContext value={{ size }}>
      {useRender({
        defaultTagName: "div",
        render,
        ref,
        props: {
          "data-slot": "avatar-group",
          "data-size": size,
          ...sx,
          ...props,
          className: clsx(sx.className, className),
          style: { ...sx.style, ...style },
        },
      })}
    </AvatarGroupContext>
  )
}

function AvatarGroupCount({
  render,
  ref,
  style,
  xstyle,
  className,
  ...props
}: useRender.ComponentProps<"div"> & Overrides) {
  const group = use(AvatarGroupContext)
  const size = group?.size ?? "default"
  const sx = stylex.props(
    styles.count,
    countSizes[size] ?? countSizes.default,
    group && styles.member,
    xstyle,
  )

  return useRender({
    defaultTagName: "div",
    render,
    ref,
    props: {
      "data-slot": "avatar-group-count",
      "data-size": size,
      ...sx,
      ...props,
      className: clsx("carbon-icons", sx.className, className),
      style: { ...sx.style, ...style },
    },
  })
}

export {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
  avatarStyles,
  type AvatarSize,
}