import { Avatar as AvatarMui, Typography, useTheme } from '@mui/material';
import { IconUser } from '@tabler/icons-react';

import Badge from '../Badge';
import Skeleton from '../Skeleton';

import { type AvatarProps } from './types';
import {
  getBorderVariant,
  getColorsVariant,
  getIconSize,
  getOffset,
  getSizeInPixels,
  getSkeletonVariant,
} from './utils';

// shows src then text then icon
export const Avatar = ({
  size = 'medium',
  color = 'default',
  withBadge = false,
  badgeProps = {},
  text,
  Icon = IconUser,
  sx,
  disabled = false,
  loading = false,
  ...props
}: AvatarProps) => {
  const theme = useTheme();
  const sizeInPixels = getSizeInPixels(size);

  if (loading) {
    return (
      <Skeleton
        variant={getSkeletonVariant(props.variant)}
        width={parseInt(sizeInPixels)}
        height={parseInt(sizeInPixels)}
      />
    );
  }
  const colorsVariant = getColorsVariant(color, theme);
  const borderVariant = getBorderVariant(color, theme);
  const roundedBorderRadius = theme.shape.borderRadius;

  const avatar = (
    <AvatarMui
      sx={{
        ...colorsVariant,
        height: sizeInPixels,
        width: sizeInPixels,
        border: borderVariant,
        ...(disabled && {
          opacity: 0.5,
          cursor: 'default',
          pointerEvents: 'none',
        }),
        ...(props.variant === 'rounded' && {
          borderRadius: roundedBorderRadius,
        }),
        ...(props.variant === 'square' && {
          borderRadius: 1,
        }),
        ...sx,
      }}
      {...props}
    >
      {text && (
        <Typography
          variant="globalXS"
          fontWeight="semiBold"
          sx={{ color: 'inherit' }}
        >
          {text}
        </Typography>
      )}
      {!text && Icon && <Icon size={getIconSize(size)} />}
    </AvatarMui>
  );
  const forcedVariant =
    size === 'small' || !badgeProps.badgeContent
      ? 'dot'
      : badgeProps?.variant || 'standard';

  const combinedBadgeProps = {
    variant: forcedVariant,
    color: 'primary' as const,
    ...badgeProps,
  };

  return withBadge ? (
    <Badge
      className="listItem-badge-avatar"
      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      sx={getOffset(size, forcedVariant)}
      // On DS3 the standard variant can be used with large and medium size
      badgeContent={badgeProps.badgeContent}
      {...combinedBadgeProps}
    >
      {avatar}
    </Badge>
  ) : (
    avatar
  );
};

export type { AvatarProps };

export default Avatar;