'use client'

import type { VariantProps } from 'class-variance-authority'
import type * as React from 'react'
import { cva } from 'class-variance-authority'
import { cn } from '../cn'

const statusDotVariants = cva('block shrink-0 border border-solid', {
  variants: {
    status: {
      success:
        'border-components-badge-status-light-success-border-inner bg-components-badge-status-light-success-bg shadow-status-indicator-green-shadow',
      warning:
        'border-components-badge-status-light-warning-border-inner bg-components-badge-status-light-warning-bg shadow-status-indicator-warning-shadow',
      error:
        'border-components-badge-status-light-error-border-inner bg-components-badge-status-light-error-bg shadow-status-indicator-red-shadow',
      normal:
        'border-components-badge-status-light-normal-border-inner bg-components-badge-status-light-normal-bg shadow-status-indicator-blue-shadow',
      disabled:
        'border-components-badge-status-light-disabled-border-inner bg-components-badge-status-light-disabled-bg shadow-status-indicator-gray-shadow',
    },
    size: {
      small: 'size-1.5 rounded-xs',
      medium: 'size-2 rounded-[3px]',
    },
  },
  defaultVariants: {
    status: 'success',
    size: 'medium',
  },
})

const statusDotSkeletonVariants = cva(
  'block shrink-0 border border-transparent bg-text-primary opacity-30',
  {
    variants: {
      size: {
        small: 'size-1.5 rounded-xs',
        medium: 'size-2 rounded-[3px]',
      },
    },
    defaultVariants: {
      size: 'medium',
    },
  },
)

type StatusDotVariants = VariantProps<typeof statusDotVariants>

export type StatusDotStatus = NonNullable<StatusDotVariants['status']>
export type StatusDotSize = NonNullable<StatusDotVariants['size']>

export type StatusDotProps = Omit<React.ComponentProps<'span'>, 'children'> & {
  status?: StatusDotStatus
  size?: StatusDotSize
}

export type StatusDotSkeletonProps = Omit<React.ComponentProps<'span'>, 'children'> & {
  size?: StatusDotSize
}

export function StatusDot({
  className,
  status = 'success',
  size = 'medium',
  'aria-hidden': ariaHidden,
  'aria-label': ariaLabel,
  'aria-labelledby': ariaLabelledBy,
  ...props
}: StatusDotProps) {
  const hidden = ariaHidden ?? (ariaLabel || ariaLabelledBy ? undefined : true)

  return (
    <span
      className={cn(statusDotVariants({ status, size }), className)}
      aria-hidden={hidden}
      aria-label={ariaLabel}
      aria-labelledby={ariaLabelledBy}
      {...props}
    />
  )
}

export function StatusDotSkeleton({
  className,
  size = 'medium',
  'aria-hidden': ariaHidden,
  'aria-label': ariaLabel,
  'aria-labelledby': ariaLabelledBy,
  ...props
}: StatusDotSkeletonProps) {
  const hidden = ariaHidden ?? (ariaLabel || ariaLabelledBy ? undefined : true)

  return (
    <span
      className={cn(statusDotSkeletonVariants({ size }), className)}
      aria-hidden={hidden}
      aria-label={ariaLabel}
      aria-labelledby={ariaLabelledBy}
      {...props}
    />
  )
}
