'use client'

import type { ComponentProps, CSSProperties } from 'react'

import type { GDSComponentProps } from '@graphprotocol/gds-css'

import { useCSSPropsPolyfill, useGDS } from '../hooks/index.ts'
import { cn, getCSSPropsAttributes } from '../utils/index.ts'
import { AvatarGroupMeta } from './AvatarGroup.meta.ts'

export interface AvatarGroupProps
  extends ComponentProps<'span'>, GDSComponentProps<typeof AvatarGroupMeta> {}

export function AvatarGroup({
  ref: passedRef,
  shape,
  size,
  className,
  style,
  children,
  ...props
}: AvatarGroupProps) {
  useGDS()

  const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(
    AvatarGroupMeta,
    { shape, size },
    { ref: passedRef },
  )

  return (
    <span
      ref={cssPropsPolyfillPassedRef}
      className={cn('gds-avatar-group root-block u:w-max u:max-w-full', className)}
      {...getCSSPropsAttributes(AvatarGroupMeta, { shape, size }, {
        '--mask-circle': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Ccircle cx='0.5' cy='0.5' r='0.5' fill='black'/%3E%3C/svg%3E")`,
        '--mask-rounded-xsmall': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='black'/%3E%3C/svg%3E")`,
        '--mask-rounded-small': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' rx='5' fill='black'/%3E%3C/svg%3E")`,
        '--mask-rounded-medium': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='5' fill='black'/%3E%3C/svg%3E")`,
        '--mask-rounded-large': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='black'/%3E%3C/svg%3E")`,
        '--mask-rounded-xlarge': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='10' fill='black'/%3E%3C/svg%3E")`,
        ...style,
      } as CSSProperties)}
      {...cssPropsPolyfillAttributes}
      {...props}
    >
      <span
        role="group"
        dir="ltr"
        className={`
          flex
          @prop-size-xsmall/avatar-group:[--gap:--spacing(0.5)]
          @prop-size-xsmall/avatar-group:[--height:--spacing(4)]
          @prop-size-xsmall/avatar-group:[--offset:--spacing(-1)]
          @prop-size-small/avatar-group:[--gap:--spacing(0.5)]
          @prop-size-small/avatar-group:[--height:--spacing(5)]
          @prop-size-small/avatar-group:[--offset:--spacing(-1)]
          @prop-size-medium/avatar-group:[--gap:--spacing(0.5)]
          @prop-size-medium/avatar-group:[--height:--spacing(6)]
          @prop-size-medium/avatar-group:[--offset:--spacing(-1.5)]
          @prop-size-large/avatar-group:[--gap:--spacing(0.75)]
          @prop-size-large/avatar-group:[--height:--spacing(8)]
          @prop-size-large/avatar-group:[--offset:--spacing(-2)]
          @prop-size-xlarge/avatar-group:[--gap:--spacing(1)]
          @prop-size-xlarge/avatar-group:[--height:--spacing(12)]
          @prop-size-xlarge/avatar-group:[--offset:--spacing(-3)]
          u:*:style-nested/avatar-paint:[--mask-translate-y:0]
          u:*:clickable:hocus-visible:style-nested/avatar-paint:-translate-y-2
          u:*:clickable:hocus-visible:style-nested/avatar-paint:[--mask-translate-y:--spacing(2)]
          u:*:clickable:hocus-visible:style-previous-peer/avatar:style-nested/avatar-paint:[--mask-translate-y:--spacing(-2)]
          i:*:not-first:ml-(--offset)
          i:*:not-last:shrink
          i:*:avatar:@container
          i:*:avatar:w-(--height)
          i:*:style-nested/avatar-paint:-m-(--gap)
          i:*:style-nested/avatar-paint:p-(--gap)
          i:*:style-nested/avatar-paint:transition-[translate,--gds-animatable-length]
          i:*:style-nested/avatar-paint:[--gds-animatable-length:var(--mask-translate-y)]
          i:*:not-last:style-nested/avatar-paint:mask-[linear-gradient(black,black),var(--mask-image)]
          i:*:not-last:style-nested/avatar-paint:mask-subtract
          i:*:not-last:style-nested/avatar-paint:mask-[cover,auto_100%]
          i:*:not-last:style-nested/avatar-paint:mask-[center,calc(100cqi+var(--offset))_var(--gds-animatable-length)]
          i:*:clickable:focus-visible:not-hover:in-avatar-group-hover:style-nested/avatar-paint:translate-y-0
          i:*:clickable:focus-visible:not-hover:not-has-[+:hover]:in-avatar-group-hover:style-nested/avatar-paint:[--mask-translate-y:0]
          i:*:clickable:focus-visible:not-hover:style-previous-peer/avatar:in-avatar-group-hover:style-nested/avatar-paint:[--mask-translate-y:0]
          i:*:clickable:focus-visible:not-hover:style-previous-peer/avatar:in-avatar-group-hover:hover:style-nested/avatar-paint:[--mask-translate-y:--spacing(2)]
          i:*:@prop-size-xsmall/avatar-group:prop-size-xsmall
          i:*:@prop-size-small/avatar-group:prop-size-small
          i:*:@prop-size-medium/avatar-group:prop-size-medium
          i:*:@prop-size-large/avatar-group:prop-size-large
          i:*:@prop-size-xlarge/avatar-group:prop-size-xlarge
          i:*:@prop-shape-circle/avatar-group:prop-shape-circle
          i:*:@prop-shape-circle/avatar-group:not-last:style-nested/avatar-paint:[--mask-image:var(--mask-circle)]
          i:*:@prop-shape-rounded/avatar-group:prop-shape-rounded
          i:*:@prop-shape-rounded/avatar-group:@prop-size-xsmall/avatar-group:not-last:style-nested/avatar-paint:[--mask-image:var(--mask-rounded-xsmall)]
          i:*:@prop-shape-rounded/avatar-group:@prop-size-small/avatar-group:not-last:style-nested/avatar-paint:[--mask-image:var(--mask-rounded-small)]
          i:*:@prop-shape-rounded/avatar-group:@prop-size-medium/avatar-group:not-last:style-nested/avatar-paint:[--mask-image:var(--mask-rounded-medium)]
          i:*:@prop-shape-rounded/avatar-group:@prop-size-large/avatar-group:not-last:style-nested/avatar-paint:[--mask-image:var(--mask-rounded-large)]
          i:*:@prop-shape-rounded/avatar-group:@prop-size-xlarge/avatar-group:not-last:style-nested/avatar-paint:[--mask-image:var(--mask-rounded-xlarge)]
        `}
      >
        {children}
      </span>
    </span>
  )
}
