import type { CSSProperties, HTMLAttributes, Ref } from 'react';
import React from 'react';
import { useVisuallyHidden } from 'react-aria';
import classNames from 'classnames';

import { Avatar as CoreAvatar, Image as CoreImage } from '@shoptet/ui-core-web';

import { Icon } from '../Icon/Icon';

interface HTMLElementProps extends HTMLAttributes<HTMLElement> {}

export interface AvatarOwnProps extends HTMLElementProps {
  /**
   * Ref for the root avatar element.
   */
  ref?: Ref<HTMLElement>;
  /**
   * The class name of the root element.
   */
  className?: string;
  /**
   * The description of the person.
   */
  description?: string;
  /**
   * Controls the lazy loading of the image.
   */
  lazy?: boolean;
  /**
   * The name of the person.
   */
  name: string;
  /**
   * The URL of the image.
   */
  src?: string;
  /**
   * The URL source set of the image.
   */
  srcSet?: string;
  /**
   * Controls the visibility of the image and text.
   * @default 'image+text'
   */
  variant?: 'image' | 'text' | 'image+text';
}

export interface AvatarProps extends Omit<AvatarOwnProps, 'className'> {}

const hiddenImgStyle: CSSProperties = { opacity: 0, transition: 'none' };

export const Avatar = ({ ref, name, description, src, srcSet, lazy, variant = 'image+text', ...rest }: AvatarProps) => {
  const { visuallyHiddenProps } = useVisuallyHidden();
  const textVisuallyHidden = variant === 'image';

  return (
    <CoreAvatar
      ref={ref}
      name={name}
      description={description}
      {...rest}
      className={classNames('avatar', (rest as { className?: string }).className)}
    >
      {variant !== 'text' && (
        <CoreImage alt={null} src={src} srcSet={srcSet} className='avatar__image' loading={lazy ? 'lazy' : undefined}>
          <CoreImage.Fallback unwrapped>
            {() => (
              <CoreAvatar.Abbreviation className='avatar__abbreviation'>
                {({ state }) => state.initials || <Icon icon='shp-user-full' />}
              </CoreAvatar.Abbreviation>
            )}
          </CoreImage.Fallback>
          <CoreImage.Img
            className='avatar__imageImg'
            style={state =>
              state.loadingState === 'initial' || state.loadingState === 'success' ? {} : hiddenImgStyle
            }
          />
        </CoreImage>
      )}
      <CoreAvatar.Caption className='avatar__text' style={textVisuallyHidden ? visuallyHiddenProps.style : undefined}>
        {({ state }) => (
          <>
            <span className='avatar__textName'>{state.name}</span>
            <span className='avatar__textDescription'>{state.description}</span>
          </>
        )}
      </CoreAvatar.Caption>
    </CoreAvatar>
  );
};