import { Button, Tooltip, TooltipTrigger } from 'react-aria-components';

export interface AvatarComponentProps {
  src?: string;
  name: string;
  size?: 'sm' | 'md' | 'lg';
  color?: 'blue' | 'default' | 'purple' | 'yellow' | 'red' | 'green';
  fontWeight?: 'bold' | 'semibold';
  zIndex?: 'high' | 'low' | 'medium';
  withTooltip?: boolean;
  className?: string;
}

const AvatarComponent = ({
  name,
  size = 'md',
  src,
  color,
  fontWeight,
  zIndex,
  withTooltip = false,
  className,
}: AvatarComponentProps) => {
  const handleZIndex = (value: string) => {
    switch (value) {
      case 'high':
        return 'z-50';
      case 'medium':
        return 'z-20';
      case 'low':
        return 'z-1';
      default:
        return 'z-20';
    }
  };

  const handleSize = (size: 'sm' | 'md' | 'lg') => {
    switch (size) {
      case 'sm':
        return 'h-7 w-7 text-[10px]';
      case 'md':
        return 'h-9 w-9 text-[12px]';
      case 'lg':
        return 'h-11 w-11 text-[14px]';
    }
  };

  const capitalizeText = (text: string) => {
    return text
      ?.split(' ')
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
      .join(' ');
  };

  const handleFontWeight = (weight: 'bold' | 'semibold') => {
    switch (weight) {
      case 'bold':
        return 'font-medium';
      case 'semibold':
        return 'font-semibold';
      default:
        return 'font-semibold';
    }
  };

  const handleColor = (color: string) => {
    switch (color) {
      case 'blue':
        return 'bg-blue-100 text-blue-900';
      case 'green':
        return 'bg-green-100 text-green-900';
      case 'purple':
        return 'bg-purple-100 text-purple-900';
      case 'red':
        return 'bg-red-100 text-red-900';
      case 'yellow':
        return 'bg-yellow-50 text-yellow-950';
      default:
        return 'bg-neutral-200 text-neutral-950';
    }
  };

  const getInitials = (name: string): string => {
    const parts = name?.trim()?.split(' ');

    if (parts?.length === 1) {
      return parts[0]?.slice(0, 2)?.toUpperCase();
    }
    return (parts?.[0]?.[0] + parts?.[1]?.[0])?.toUpperCase();
  };

  const getAvatarColor = (value: string): string => {
    const firstChar = value?.toLowerCase()[0];
    switch (true) {
      case 'a' <= firstChar && firstChar <= 'd':
        return 'green';
      case 'e' <= firstChar && firstChar <= 'h':
        return 'purple';
      case 'i' <= firstChar && firstChar <= 'l':
        return 'red';
      case 'm' <= firstChar && firstChar <= 'p':
        return 'yellow';
      case 'q' <= firstChar && firstChar <= 't':
        return 'blue';
      default:
        return 'default';
    }
  };

  const avatarImg = (
    <span
      className={`${className} ${handleSize(size)} ${handleColor(color ?? 'default')} ${handleZIndex(zIndex ?? 'medium')} relative box-border flex select-none items-center justify-center overflow-hidden rounded-full border-[2px] border-neutral-50 bg-neutral-200 align-middle text-neutral-950 outline-purple-600 data-[focus-visible=true]:-outline-offset-2`}
    >
      <img
        aria-hidden="true"
        className="flex h-full w-full object-cover transition-opacity !duration-500"
        src={src}
        alt={name}
      />
    </span>
  );

  const avatarSpan = (
    <span
      className={`${className} ${handleSize(size)} ${handleColor(color ?? getAvatarColor(name))} ${handleZIndex(zIndex ?? 'medium')} relative box-border flex select-none items-center justify-center overflow-hidden rounded-full border-[2px] border-neutral-50 align-middle outline-purple-600 data-[focus-visible=true]:-outline-offset-2`}
    >
      <span
        aria-hidden="true"
        className={`${handleFontWeight(fontWeight ?? 'semibold')} text-inherit", absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 break-keep text-center`}
      >
        {getInitials(name)}
      </span>
    </span>
  );

  return (
    <>
      {withTooltip ? (
        <>
          <TooltipTrigger delay={200} closeDelay={200}>
            <Button
              id="avatar"
              className="focus-visible:rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-purple-600"
            >
              {src ? avatarImg : avatarSpan}
            </Button>
            <Tooltip
              className="shadow-medium pointer-events-none my-1 rounded-md bg-neutral-900 text-neutral-50 transition-all"
              placement="bottom"
            >
              <p className="px-2 py-1 text-[10px]">{capitalizeText(name)}</p>
            </Tooltip>
          </TooltipTrigger>
        </>
      ) : src ? (
        avatarImg
      ) : (
        avatarSpan
      )}
    </>
  );
};

export { AvatarComponent };