import { ForwardedRef, forwardRef, useState, MouseEvent } from 'react';
import classNames from 'classnames/bind';
import { RtAvatarProps, RtAvatarSize } from './rt-avatar.types';
import { RtText } from '@dpa/react-text';
import { RtFrame } from '@dpa/react-frame-intro';
import { RtBaseProps, useRtBaseProps } from '@dpa/react-hoc';
import { getIcon } from './utils/get-icon';
import { getUsernameLetters } from './utils/get-username-letters';

import config from './styles/component-values-avatar.module.css';
import styles from './styles/rt-avatar.module.css';

const cn = classNames.bind(styles);

const mapFontSize: Record<RtAvatarSize, 'xs' | 'sm' | 'md' | 'lg'> = {
  xs: 'xs',
  sm: 'xs',
  md: 'sm',
  lg: 'md',
  xl: 'lg',
};

export const RtAvatar = forwardRef(
  (
    props: RtAvatarProps & RtBaseProps<HTMLDivElement>,
    ref: ForwardedRef<HTMLDivElement>
  ) => {
    const {
      size = 'md',
      use,
      modifier = 'mono',
      radius = 'primary',
      username,
      readOnly = false,
      contentType = 'figure',
      imgSrc,
      imgAltText,
    } = props;

    const { onClick, ...baseProps } = useRtBaseProps(props, '0.2.2');

    const [isLoading, setIsLoading] = useState(Boolean(imgSrc));
    const [isError, setIsError] = useState(false);

    const onError = () => {
      setIsError(true);
      setIsLoading(false);
    };

    const clickHandler = (event: MouseEvent<HTMLDivElement>) => {
      if (!readOnly) {
        onClick?.(event);
      }
    };

    const avatarContent = () => {
      // TODO loader
      if (imgSrc && !isError) {
        return (
          <img
            alt={imgAltText}
            className={cn(`аvatar__img`)}
            onError={onError}
            onLoad={() => setIsLoading(false)}
            src={imgSrc}
          />
        );
      }
      if (contentType === 'figure') {
        const Icon = getIcon(username);
        return <Icon size={size} />;
      }
      if (contentType === 'letters') {
        return (
          <RtText typography={`symbol-${mapFontSize[size]}-primary`}>
            {getUsernameLetters(username)}
          </RtText>
        );
      }
    };

    return (
      <RtFrame
        as="div"
        isFontSizeProvider
        surface="control"
        use={use}
        modifier={modifier}
        tabIndex={1}
        ref={ref}
        className={cn(
          config[`rt-avatar-${size}`],
          'аvatar',
          `аvatar--size-${size}`,
          `аvatar--radius-${radius}`,
          {
            'аvatar--read-only': readOnly,
            'аvatar--loading': isLoading,
          }
        )}
        onClick={clickHandler}
        {...baseProps}
      >
        {avatarContent()}
      </RtFrame>
    );
  }
);

RtAvatar.displayName = 'RtAvatar';